0

<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因此,当匹配的 img fromiconcontainerhover悬停在上方时,我试图让文本淡入。

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

4

4 回答 4

0

()在那之后你有一个额外的东西mouseenter不应该在那里。除此之外,它看起来还不错,尽管您可能应该查看.hover.

编辑:另外,请确保您也隐藏了打开的评论,否则您最终会立即显示所有描述。

于 2013-03-06T23:20:21.680 回答
0

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

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

于 2013-03-06T23:21:18.073 回答
0

LIVE DEMO

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

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

     });
});
于 2013-03-06T23:25:29.650 回答
0

您的 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 时,您真的应该隐藏和显示这些内容。要获得您想要的感觉,请将这个隐藏添加到您的 mouseenter。

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

这是最终的 jsFiddle。

于 2013-03-06T23:26:50.283 回答