jquery - 当我将鼠标悬停在图像或链接上时使文本淡入

Question

我正在尝试获取一些文本到 <p> 中当我将鼠标悬停在某个图像上时标记。我无法显示文本，代码对我来说看起来不错。谁能帮我找出为什么文本没有显示/

这是HTML

<div class="iconcontainerhover">
        <a rel="left" href="#"><img style="margin-right: 160px;" src="img/facebookicon.png" /></a>
        <a rel="middle" href="#"><img src="img/Twittericon.png" /></a>
        <a rel="right" href="#"><img style="margin-left: 160px" src="img/google_plus_icon.png" /></a>
    </div>
    <div id="descripinfo">
        <div id="lefticoncontent">
            <p id="left">This is information about the left icon</p>
        </div>
        <div id="middleiconcontent">
            <p id="middle">This is information about the middle icon</p>
        </div>
        <div id="righticoncontent">
            <p id="right">This is information about the right icon</p>
        </div>

这是jquery

$(function(){
     $('.iconcontainerhover a').mouseenter()(function(){
         var toShow = '#' + $(this).attr('rel');
         $('#discripinfo').show();
         $(toShow).show();
     }).mouseleave(function(){
         $('#discripinfo').hide();
     });
});

所以我正在尝试获取 #discripinfo 中的文本在来自 iconcontainerhover 的匹配 img 时淡入悬停在上面。

顺便说一句 #discripinfo标签设置为 display: none;

Answer 1

您的 JavaScript 中有一些拼写错误。这是你应该写的。

$(function(){
    $('.iconcontainerhover a').mouseenter(function(){   
        var toShow = '#' + $(this).attr('rel') +'iconcontent';
        $('#descripinfo').show();
        $(toShow).show();
     }).mouseleave(function(){
        $('#descripinfo').hide();
     });
});

更改 #1) descripinfo 而不是 discripinfo #2) 在左/右之后添加 'iconcontent'。 我添加 iconcontent 的原因是你可能真的想隐藏/显示整个外包装而不是内包装。在视觉上，应用样式后它可能看起来更正确。

我仍然认为它没有达到您的预期，因为您显示的是左/右中心。当您执行 #descripinfo 时，您应该真正隐藏和显示这些内容。要获得您想要的感觉，请将此隐藏添加到您的鼠标输入中。

        var toShow = '#' + $(this).attr('rel') +'iconcontent';
        $('#descripinfo').show();
        $('#descripinfo div').hide();
        $(toShow).show();

Here's the final jsFiddle.