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

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();
     });
});

所以当悬停在iconcontainerhover的匹配img上时，我试图使#discripinfo的文本淡入。

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

Answer 1

mouseenter之后有一个多余的() ，它不应存在。 除此之外，它看起来还不错，尽管您可能应该研究.hover 。

编辑：另外，请确保隐藏也打开的注释，否则最终将立即显示所有描述。

Answer 2

您可以使用$('#descripinfo').fadeIn();

从文档中： http : //api.jquery.com/fadeIn/

Answer 3

现场演示

$(function(){
     $('.iconcontainerhover a').on('mouseenter mouseleave', function( e ){

         $('#descripinfo > div').hide();       
         if(e.type=='mouseenter') $( '#'+this.rel+'iconcontent' ).show().siblings().hide();

     });
});

Answer 4

您的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();

这是最终的jsFiddle。