Question

我有一个图像缩略图，我希望它显示一个隐藏的div，它包含相同的图像，但更大，下面有一些描述。只要鼠标悬停在此div上，它就应该在鼠标悬停在缩略图上时显示隐藏的div。但出于某种原因，这真的很糟糕：图像有时会卡住或者无法打开。这是代码：

$(document).ready(function() {
  $(".dropdown").hover(function() {
    $(this).children(".dropdown-content").delay(800).show(0);
  }, function() {
    $(this).children(".dropdown-content").hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <style>
    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    .desc {
      padding: 15px;
      text-align: center;
    }
  </style>
</head>

<body>

  <h2>Dropdown Image</h2>

  <div class="dropdown">
    <img src="image.png" width="100" height="50">
    <div class="dropdown-content">
      <img src="image.png" width="300" height="200">
      <div class="desc">Description</div>
    </div>
  </div>

Answer 1

在对元素执行操作之前，先添加.stop（）。

$(document).ready(function() {
  $(".dropdown").hover(function() {
    $(this).children(".dropdown-content").stop().delay(800).show(0);
  }, function() {
    $(this).children(".dropdown-content").stop().hide();
  });
});

它是如何工作的：当你弄乱它时，它会记录你触发的次数，然后多次动画它......或类似的东西......所以.stop()做的是确保当你搞砸它时，它首先停止任何以前的动画并做一个新动画。所以如果你愿意，它会消除它的记忆。

Answer 2

这是你想要的吗？

＆＃13;

var dropdowncontent = document.getElementById("dropdown-content");
function a() {
dropdowncontent.style.display = "inline-block";
}
function b() {
dropdowncontent.style.display = "none";
}

＆＃13;

    .dropdown {
      position: relative;
      display: inline-block;
    }
    
    .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
      z-index: 1;
    }
    
    
    .desc {
      padding: 15px;
      text-align: center;
    }

＆＃13;

<!DOCTYPE html>
<html>

<head>

</head>

<body>

  <h2>Dropdown Image</h2>

  <div class="dropdown" onmouseover="a()" onmouseout="b()">
    <img src="image.png" width="100" height="50">
    <div class="dropdown-content" id="dropdown-content">
      <img src="image.png" width="300" height="200">
      <div class="desc">Description</div>
    </div>
  </div>

＆＃13;

缩略图悬停时显示图片下拉列表，悬停时隐藏

2 个答案: