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

()之后你不应该有额外的mouseenter。除此之外，它看起来没问题，尽管您应该考虑.hover。

编辑：此外，请确保您隐藏了已打开的评论，否则您最终会立即显示所有说明。

Answer 2

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

来自文档：http://api.jquery.com/fadeIn/

Answer 3

的 LIVE DEMO

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

Here's the final jsFiddle.

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

4 个答案: