Question

我想在悬停时显示一个元素。以下代码完成了它。但是有一个问题，如果你将鼠标悬停多次，该元素会在光标消失时显示多次。

在演示中多次将鼠标悬停在链接上以了解问题。

＆＃13;

$('li').hover(function() {
  $(this).find('.box').delay(100).fadeIn();
}, function() {
  $(this).find('.box').delay(100).fadeOut('fast');
});

＆＃13;

.box {
  color: #FFF;
  width: 200px;
  background: #000;
  position: absolute;
  display: none;
  margin-top: 50px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="images">
  <li>
    Show
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper.
    </div>
  </li>
</div>

＆＃13;

JSFiddle https://jsfiddle.net/e99afrg8/

Answer 1

jQuery没什么问题，但你可以使用CSS :hover和transition更轻松。

不再有悬停后的显示效果。

.box {
    color: #FFF;
    width: 0;
    height: 0;
    background: #000;
    position: absolute;
    /* display: none; */
    margin-top: 50px;
}

div:hover .box {
    width: 200px;
    height: 100px;
    transition: all .1s linear .1s; /* property, duration, timing-function, delay */
}

<div id="images">
    <li>
        Show
        <div class="box">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Fusce eu condimentum odio, non congue quam. 
            Cras feugiat nulla at mattis semper.
        </div>
    </li>
</div>

Answer 2

jQuery动画默认排队。因此，当您快速上下移动时，所有这些动画都排队等候，并在您停止悬停后继续播放。

我建议使用stop()来“匹配匹配元素上当前正在运行的动画。”

在我的示例中，我还选择清除队列，但不跳转到当前动画的末尾。您可能希望尝试这些值并查看您喜欢的行为。

.stop（[clearQueue] [，jumpToEnd]）

$('li').hover(function() {
  $(this).find('.box').stop(true,false).delay(100).fadeIn();
}, function() {
  $(this).find('.box').stop(true,false).delay(100).fadeOut('fast');
});

.box {
  color: #FFF;
  width: 200px;
  background: #000;
  position: absolute;
  display: none;
  margin-top: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="images">
  <li>
    Show
    <div class="box">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper.
    </div>
  </li>
</ul>

Answer 3

要在鼠标悬停“显示”字词上显示.box { color: #FFF; width: 200px; background: #000; position: absolute; display: none; margin-top: 50px; } li:hover .box { display: block; }元素，您只需添加CSS规则。

请参阅此示例，不使用javascript。

<div id="images">
    <li>
        Show
        <div class="box">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper.
        </div>    
        </li>
</div>

awk -F: '$1=gensub(/([^,]+)[ ]+([^ ,]+)/,"\\2, \\1","1",$1)' yourfile

Answer 4

使用jquery：

 $(".show").hover(
    function () {
        $(".box").stop(true, true).fadeIn(500);
    },
    function () {
        $(".box").stop(true, true).fadeOut(500);
    }
 );

Answer 5

你可能只是用css来做那件事

.box {
    color: #FFF;
    width: 200px;
    background: #000;
    position: absolute;
    display: none;
    margin-top: 50px;
}

li:hover .box{
  display: block;
}

Answer 6

li是一个块元素。因此，当您将鼠标移动到li的任何部分时，鼠标悬停生效。如果您只想在文本悬停时显示该框，则可以调整...

添加<span>包装文字....

<div id="images">
    <li>
       <span>Show</span>
        <div class="box">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu condimentum odio, non congue quam. Cras feugiat nulla at mattis semper.
        </div>    
        </li>
</div>

然后将鼠标悬停在span上，而不是li本身：

$('li span').hover(function() {
    $(this).parent().find('.box').delay(100).fadeIn(); 
}, function() {
    $(this).parent().find('.box').delay(100).fadeOut('fast');
});

<强> Updated Fiddle here

你做意识到包含div的{{1}}标记是无效的HTML吗？只有li代码应包含ul代码。

指针移开后防止悬停效果

6 个答案: