滑动面板在鼠标悬停时振荡

Sliding panel oscillates while mouse over

本文关键字：悬停 鼠标      更新时间：2023-09-26

我用HTML和jQuery构建了一个div容器，当您将鼠标悬停在它上面时，另一个面板会在顶部滑动。但我正在体验滑动面板的"yoyo"。我认为这是因为当面板在div上滑动时，悬停状态会被触发，然后丢失，因此面板会不断地上下弹出。

我想发生的是，当你在广场上的任何地方悬停时，面板会显示，而当你不在广场上时，面板不会显示。

这是一把小提琴，这样你就可以看到问题是什么，也许这样解释更容易。

https://jsfiddle.net/xa5gtd2u/3/

这里还有代码

HTML

<div class="container">
  <div class="services-blocks">
    <img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
    <h3>title here</h3>
  </div>
  <div class="services-slide-panel">
  <h3>title here</h3>
    Some text here
    Some text here
    Some text here
    Some text here
  </div>
</div>

CSS

    .services-slide-panel {
  background: #f3535e;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 0;
  display: none;
  color: #ffffff;
}
.services-slide-panel h3 {
  color: #ffffff;
}
.services-blocks h3 {
  text-align: center;
  position: absolute;
  bottom: 5%;
  width: 100%;
  color: #ffffff;
}
.container {
  width: 250px;
  height: 250px;
  position: relative;
}

jQuery

      $(document).ready(function() {

    $(".services-blocks").hover(function() {
      $(this).next(".services-slide-panel").slideToggle("slow");
    });
  });

CSS3转换总是实现此类效果的更好选择。此外，您必须在.container上hover()，否则滑动的div将代替悬停，并调用hover()函数的悬停部分。

  $(document).ready(function() {
    $(".container").hover(function() {
      $(this).find(".services-slide-panel").addClass("slow");
    }, function() {
      $(this).find(".services-slide-panel").removeClass("slow");
    });
  });
.services-slide-panel {
  background: #f3535e;
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  top: 110%;
  color: #ffffff;
  transition: all 0.3s ease;
}
.services-slide-panel.slow {
  top: 0%;
}
.services-slide-panel h3 {
  color: #ffffff;
}
.services-blocks h3 {
  text-align: center;
  position: absolute;
  bottom: 5%;
  width: 100%;
  color: #ffffff;
}
.container {
  width: 250px;
  height: 250px;
  position: relative;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="services-blocks">
    <img class="alignnone size-full wp-image-1974" src="http://placehold.it/250x250" alt="Design" width="250" height="250" />
    <h3>title here</h3>
  </div>
  <div class="services-slide-panel">
    <h3>title here</h3> Some text here Some text here Some text here Some text here
  </div>
</div>

Fiddle here

相关文章：