0

我已经阅读了有关此问题的其他问题和答案，但它们对我不起作用，也许我遗漏了某些东西，或者我的示例略有不同，我不知道。无论如何，我有一个 div，里面有一些文本和一个链接，当用户将鼠标悬停在第一个 div 上时，我想创建一个新 div。问题是，当我超过第一个 div 时，第二个会不断地淡入和淡出，即使我没有用鼠标离开第一个 div。

这是HTML代码：

<div id="content">
    <h1>Portfolio</h1>
        <div id="web">
            <p>Web apps</p>
            <a href="#">
                First link
            </a>
        </div>
        <div id="commentweb">
            <p>The text that I want to show</p>
        </div>
</div>

这是jQuery：

$(document).ready(function() {

$("#web").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
});

$("#commentweb").hide();

$("#web").hover(
  function () {
    $(this).children("a").children("img").attr("src","2.png");
    $(this).css("background-color","#ecf5fb");
    $(this).css( 'cursor', 'pointer' );
    $(this).css('border','1px solid #378ac4');
    $(this).children("p").css("opacity","1.0");
    $('#commentweb').stop(true, true).fadeIn();
  }, 
  function () {
    $(this).children("a").children("img").attr("src","1.png");
    $(this).children("p").css("opacity","0.5");
    $(this).css("background-color","#e8e3e3");
    $(this).css('border','1px solid grey');
    $('#commentweb').stop(true, true).fadeOut();
  }
);
});

我应该怎么做才能在我结束#web 时开始淡入动画，而当我离开该 div 时开始淡出动画，而不闪烁（即恒定的淡入和淡出）？

我添加了一个小提琴来向您展示问题：http: //jsfiddle.net/mMB3F/ 它基本上发生在我将鼠标悬停在文本上时。

4

3 回答 3

1

出现此问题是因为您的评论 div 在您分配悬停事件的 div 内。请注意，当您在下图中显示的突出显示区域（红色）中输入鼠标指针时会发生闪烁（与评论 div 相关）。

在此处输入图像描述

看看这个解决方案：http: //jsfiddle.net/davidbuzatto/mMB3F/1/

评论 div 现在有了绝对定位。当鼠标进入时，注释 div 将显示在指针旁边。当然，现在您需要更改代码以满足您的需求。另一种方法是设置一个包含#web div 的div 容器，并在它旁边放置另一个div，将它们设置为浮动。在新 div 中插入带有注释的 div。

于 2012-08-25T16:40:22.227 回答
1

更新

我的另一个答案有点过于浮夸，你只需要浮动你的另一个 div

#commentweb {float:left}

http://jsfiddle.net/mMB3F/5/

它需要是异步的，stop() 是导致它闪烁的原因，但如果您在分配事件处理程序之前等待淡入淡出完成，则不需要停止。

http://jsfiddle.net/u7Q9P/1/

于 2012-08-26T01:48:20.567 回答
0

使用 jquery.mouseenter()并.mouseleave()避免这种情况。这样，您不必在 CSS 中重新定位任何内容。

在这里查看我的答案以获取更多详细信息

于 2012-08-25T16:55:29.303 回答