Question

jQuery代码：

$(".menu-option").mouseover(function() {
    $(this).css("opacity", 1);
    $("h2", this).slideDown(500);
}); 

$(".menu-option").mouseout(function() {
    $(this).css("opacity", 0.6);
    $("h2", this).slideUp(500);
});

HTML：

<div id="menu-gallery">
<a href="#"><div id="first-background" class="menu-option">
    <h2>BREAKFAST</h2>
</div></a>

<a href="#"><div id="second-background" class="menu-option">
<h2>SEAFOOD</h2>
</div></a>

<a href="#"><div id="third-background" class="menu-option">
<h2>GRILLED</h2>
</div></a>

<a href="#"><div id="fourth-background" class="menu-option">
<h2>VEGAN</h2>
</div></a>

<a href="#"><div id="fifth-background" class="menu-option">
<h2>DRINKS</h2>
</div></a>

<a href="#"><div id="sixth-background" class="menu-option">
<h2>DESSERT</h2>
</div></a>
</div>

</div>

伙计们，这个jQuery函数正在发生一些奇怪的事情。基本上，我希望h2在鼠标进入时向下滑动，然后在鼠标离开时滑出。它实现了这一点，但当我将鼠标放在h2元素所在的位置时，即使没有鼠标离开，h2元素也开始向下滑动，同时鼠标在一个点上（实际上，它似乎只发生在我身上）如上所述，突出显示h2元素的放置位置。我认为在h2中增加了margin-top，所以它有点出现在div / background图像的中间。这一次，它再次上下滑动，甚至没有停止！

我不确定导致此问题的原因。我的jQuery代码有什么问题吗？

这是我作为Web开发人员的第一个项目。所以我意识到我可能犯了一个简单的错误，但我无法发现它。

有人可以帮忙吗？

Answer 1

这与传播或泡沫有关。当你的鼠标超过H2时，它实际上超出了菜单选项，因此调出了。

我建议代码应该使用H2绑定触发器而不是menu-option。像这样：

$("h2").mouseover(function(){
   $(this).closest('.menu-option').css("opacity", 1);
   $(this).slideDown(500);
}); 

$("h2").mouseout(function(){
   $(this).closest('.menu-option').css("opacity", 0.6);
   $(this).slideUp(500);
});

Answer 2

只是交换活动。试试这个：

＆＃13;

$('.menu-option').hover(
  function() {
   $(this).css("opacity", 0.6);
   
    $(this).find('h2').slideUp(500);
  },
  function() {
    $(this).css("opacity", 1);
    $(this).find('h2').slideDown(500);
  }
);

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="menu-gallery">
  <a href="#">
    <div id="first-background" class="menu-option">
      <h2>BREAKFAST</h2>
    </div>
  </a>

  <a href="#">
    <div id="second-background" class="menu-option">
      <h2>SEAFOOD</h2>
    </div>
  </a>

  <a href="#">
    <div id="third-background" class="menu-option">
      <h2>GRILLED</h2>
    </div>
  </a>

  <a href="#">
    <div id="fourth-background" class="menu-option">
      <h2>VEGAN</h2>
    </div>
  </a>

  <a href="#">
    <div id="fifth-background" class="menu-option">
      <h2>DRINKS</h2>
    </div>
  </a>

  <a href="#">
    <div id="sixth-background" class="menu-option">
      <h2>DESSERT</h2>
    </div>
  </a>
</div>

</div>

＆＃13;

jQuery mouseenter，slideDave上的slideleave，SlideUp导致问题

2 个答案: