Question

我已经使用HTML和jQuery构建了一个div容器，当你将鼠标悬停在它上面时，另一个面板会滑过顶部。但我正在体验滑动面板＆＃34; yoyo＆＃34;关于。我认为这是因为当面板滑过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");

    });

  });

Answer 1

CSS3过渡始终是做这些效果的更好选择。此外，您必须在hover()上.container，否则滑入div将取代悬停，并且将调用hover()函数的悬停部分。

＆＃13;

  $(document).ready(function() {


    $(".container").hover(function() {

      $(this).find(".services-slide-panel").addClass("slow");

    }, function() {
      $(this).find(".services-slide-panel").removeClass("slow");

    });

  });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

<强> Fiddle here

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

1 个答案: