Show/Hide 悬停元素滑动 jQuery

Question

我有点困难，似乎找不到答案。

所以，我有一个 class 个名为 .accom-img 的图像和一个 class 个带有描述的 div，名为 .accom-desc。当我将鼠标悬停在 .accom-img 上时，我用 slideUp() 隐藏了它，而我只用 .show() 显示了 .accom-desc（隐藏在页面加载中但位于它们的正下方）。

当鼠标离开时 .accom-desc 我希望图像向下滑动。除了鼠标离开 .accom-desc 之外，我可以让一切正常工作。图片只是隐藏起来。

请帮我解决我做错的地方。谢谢！

       jQuery(document).ready(function() {
     jQuery('.accom-desc').hide();

     jQuery('.accom-img').hover(function() {
      jQuery('.accom-img').slideUp();
     }, function() {
           jQuery('.accom-desc').show();
     });

     jQuery('.accom-desc').mouseleave(function() {
      jQuery('.accom-img').slideDown();
     }, function() {
            jQuery('.accom-desc').hide();
     });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="accom-container">
  <div class="accom-desc"> 
    <h4>6 Sleeper House</h6> 
    <ul class="accom-ul"> 
      <li>2 x en-suite bedrooms each with a double bed with mosquito net.</li> 
      <li>2 x single beds with mosquito nets in the living area.</li> 
      <li>Fridge and chest freezer and fully fitted kitchen.</li> 
      <li>Television with DVD-player..bring lots of DVD's and own DSTV- decoder.(DSTV dish and connection available)</li> <li>Own private Jacuzzi</li> 
    </ul> 
  </div> 
</div>

Answer 1

这可能是因为您的功能同时运行。你需要做这样的事情：

jQuery('.accom-desc').mouseleave(function() {
        jQuery('.accom-img').slideDown(1000, function() {
        jQuery('.accom-desc').hide();
    }));

Show/Hide 悬停元素滑动 jQuery

Show/Hide element on hover with sliding jQuery

css

jquery

jquery-hover