JavaScript / jQuery 具有延迟的鼠标悬停事件

Question

我有一个代码可以让我在鼠标悬停稍微延迟后显示隐藏的 divs，我现在的问题是我对 CS 不是很好，我在其中有一些元素 div使用该代码：

$(document).ready(function() {
  var timer;
  var delay = 250;
  $("#content1").mouseover(function() {
    timer = setTimeout(function() {
      $("#content.left1").css("display", "block");
    }, delay);
  });
  $("#content1").mouseout(function() {
    $("#content.left1").css("display", "none");
    clearTimeout(timer);
  });
});

.txtmiddle {
  border: 1px solid rgba(215, 215, 215, 0.1);
  background-color: rgba(245, 245, 245, 0.7);
  margin-top: 5px;
  opacity: 0.6;
  filter: alpha(opacity=60);
  padding: 2%;
  border-radius: 15px;
  position: relative;
  overflow: auto;
  -webkit-animation: fadeIn 0.1s;
  animation: fadeIn 0.1s;
}
.txtmiddle:hover {
  border: 1px solid rgba(55, 55, 55, 0.2);
  background-color: rgba(255, 255, 255, 0.9);
  opacity: 1;
  filter: alpha(opacity=100);
}
#content {
  display: none;
  background: rgba(255, 255, 255, 0.9);
  padding: 15px;
  border-radius: 15px;
  overflow: hidden;
  position: relative;
}
#txtleft {
 width: 30%;
 float: left;
 margin-left: 4%;
 border-top: 1px solid rgba(0, 0, 0, 0.0);
}

  <div id="txtleft"><div id="content" class="left1">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit a</div>  </div>
  <div id="middlewrapper"><div class="txtmiddle" id="content1">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentleft">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/82/Nuvola_mimetypes_info.png/100px-Nuvola_mimetypes_info.png" id="midcontentimgright" class="1">
</div>  </div>

无法在此处运行 ....但它工作正常我现在唯一的问题是每次我将鼠标悬停在 div 中的元素（那些图像）上时，隐藏的内容是（重新）再次显示（有那个延迟）（在我没有延迟之前所以隐藏的元素不会消失并再次出现并且人们不会注意到变化......

Answer 1

为什么不简单地使用 fadeIn('slow') 和 fadeOut('slow') 而不是

Answer 2

我通常会使用 jQuery hover() 来实现您想要的：

$(document).ready(function () {
    var timeout;

    $("#content1").hover(function () {
        timeout = setTimeout(function () {
            $("#content.left1").css("display", "block");
        }, 250);
    },
    function () {
        clearTimeout(timeout);
        $("#content.left1").css("display", "none");
    });
});

演示 here.

Answer 3

正如 atinder 所说 jQuery 的 fadeIn 和 fadeOut 函数将满足您的需要：

试试下面的代码：

jQuery(document).ready(function() {
var delay = 1000;//the delay interval
jQuery("#content1").mouseover(function() {     
  jQuery( "#content.left1" ).fadeIn(delay);
});
jQuery("#content1").mouseout(function() {    
   jQuery( "#content.left1" ).fadeOut(delay);
   });
});

希望对您有所帮助..

JavaScript / jQuery 具有延迟的鼠标悬停事件

JavaScript / jQuery mouseover event with delay

html

javascript

css

jquery

mouseover