Question

我正在尝试在鼠标悬停时制作节目内容，并让鼠标悬停在列表上时保持可见，因为我打算在那里放一个按钮，但是当我悬停时，隐藏的内容因某些原因而保持弹跳。

jQuery代码

$('li.employers').mouseover(function () {
    $('.employer_content').show("slow");
    $(this).addClass("bluehover");
});

$('li.employers').mouseout(function () {
    $('.employer_content').hide("fast");
    $(this).removeClass("bluehover");
});

HTML

<li class="employers">
    <div>employer</div>
    <div class="employer_content">some content.</div>
</li>
<li class="court">
    <div>court</div>
    <div class="court_content">some content.</div>
</li>

http://jsfiddle.net/zLdnnxnh/3/

Answer 1

您可以使用仅限CSS 来显示/隐藏内容。您可以利用CSS中的:hover类。

Demo using CSS only

＆＃13;

.whatwedo {
  padding: 20px;
  color: #fff;
  max-width: 480px;
  margin: 0 auto;
}
ul li {
  list-style-type: none;
}
ul > li {
  background-color: #08588c;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  float: left;
  max-width: 100px;
  padding: 10px;
}
.whatwedo {} ul.wwd_list {
  padding: 0;
  margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
  display: none;
  clear: right;
}
.bluehover {
  background-color: #01395d;
}
.content {
  padding-top: 10px;
  display: none;
}
.wwd_list li:hover .content {
  display: block;
}

＆＃13;

<div class="whatwedo">
  <ul class="wwd_list">
    <li class="employers">
      <div>employer</div>
      <div class="content">some content.</div>
    </li>
    <li class="court">
      <div>court</div>
      <div class="content">some content.</div>
    </li>
    <li class="companies">
      <div>companies</div>
      <div class="content">some content.</div>
    </li>
    <li class="laborunion">
      <div>labour union</div>
      <div class="content">some content.</div>
    </li>
  </ul>
</div>

＆＃13;

CSS Demo with Animation

如果仍然想要使用jQuery：

当您将鼠标移到元素上时，您正在使用导致处理程序运行的mouseover事件，而是使用mousein
使用hover代替mousein和mouseout
您的代码不灵活，您可以按照以下方式优化代码
使用stop()停止以前的动画

Demo

＆＃13;

$('.wwd_list li').hover(function() {
  $(this).find('div.content').stop().show("slow");
  $(this).addClass("bluehover");
}, function() {
  $(this).find('div.content').stop().hide("slow");
  $(this).removeClass("bluehover");
});

＆＃13;

.whatwedo {
  padding: 20px;
  color: #fff;
  max-width: 480px;
  margin: 0 auto;
}
ul li {
  list-style-type: none;
}
ul > li {
  background-color: #08588c;
  display: inline-block;
  width: 100%;
  cursor: pointer;
  float: left;
  max-width: 100px;
  padding: 10px;
}
.whatwedo {} ul.wwd_list {
  padding: 0;
  margin: 0;
}
.employer_content,
.court_content,
.companies_content,
.labor_content {
  display: none;
  clear: right;
}
.bluehover {
  background-color: #01395d;
}
.content {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div class="whatwedo">
  <ul class="wwd_list">
    <li class="employers">
      <div>employer</div>
      <div class="content">some content.</div>
    </li>
    <li class="court">
      <div>court</div>
      <div class="content">some content.</div>
    </li>
    <li class="companies">
      <div>companies</div>
      <div class="content">some content.</div>
    </li>
    <li class="laborunion">
      <div>labour union</div>
      <div class="content">some content.</div>
    </li>
  </ul>
</div>

＆＃13;

Answer 2

您可以使用hover代替mouseover和mouseout。像这样：

$('li.employers').hover(function () {
    $('.employer_content').show("slow");
    $(this).addClass( "bluehover" );
    console.log('mouse in');

}, function() {
    $('.employer_content').hide("slow");
    $(this).removeClass( "bluehover" );
    console.log('mouse out');
});

Here's an example

Answer 3

this怎么样？

您可以使用stop()停止动画并从停止的位置继续播放新动画

$('.employer_content').stop().show("slow");
$('.employer_content').stop().hide("slow");

根据他人的建议，使用mouseenter而不是mouseover

Answer 4

将mouseover功能替换为mouseenter，将mouseout替换为mouseleave。

你可以看到这个小提琴正在运作。

http://jsfiddle.net/ebilgin/zLdnnxnh/7/

Answer 5

尝试使用mouseenter和mouseleave代替：

来自https://api.jquery.com/mouseover/：

此事件类型可能会因事件冒泡而导致许多令人头疼的问题。对于例如，当鼠标指针在此内部元素上移动时例如，鼠标悬停事件将被发送到该事件，然后涓涓细流外。这可以在inopportune触发我们绑定的mouseover处理程序倍。有关有用的替代方法，请参阅.mouseenter（）的讨论。

$('li.employers').mouseenter(function () {
    $('.employer_content').show("slow");
    $(this).addClass("bluehover");
});

$('li.employers').mouseleave(function () {
    $('.employer_content').hide("fast");
    $(this).removeClass("bluehover");
});

http://jsfiddle.net/zLdnnxnh/5/

Answer 6

只需从隐藏功能中删除$('li.employers').mouseover(function () { $('.employer_content').show("slow"); $(this).addClass("bluehover"); }); $('li.employers').mouseout(function () { $('.employer_content').hide(); $(this).removeClass("bluehover"); });即可。它是工作。检查这个小提琴：http://jsfiddle.net/zp3jr43u/

JavaScript代码应如下所示。

{{1}}

Answer 7

不知何故，mouseover事件会被多次触发。我在切换元素之前使用.stop()方法使其工作。

http://jsfiddle.net/zLdnnxnh/4/

Answer 8

您不需要为每个列表项都有单独的类。即使使用这些单独的类，下面的代码也可以让您轻松上手。

$('.wwd_list li').hover(function () {
    $('div:last-child',this).show("slow");
    $(this).addClass( "bluehover" );  
}, function(){
   $('div:last-child',this).hide("slow");
   $(this).removeClass( "bluehover" );
});

请注意，您只需要使用一个悬停功能而不是鼠标和鼠标移出。这是有效的，因为你在wwd_lsit类中有两个div，而最后一个恰好是你想要定位的那个。如果你想改变一些东西，请小心！

Answer 9

将mouseover替换为mouseenter，将mouseout替换为mouseleave。

查看更具分解的形式：

$('li').on({
  mouseenter: function() {
    jQuery("div.content", this).show('slow');
    $(this).addClass( "bluehover" );
  },
  mouseleave: function() {
    jQuery("div.content", this).hide('fast');
    $(this).removeClass( "bluehover" );
  }
});

（内容类已添加到每个内容div）

See the updated fiddle

鼠标悬停使用jQuery保持弹跳

jQuery代码

HTML

9 个答案: