Question

我有一个代码，允许我在鼠标悬停一点延迟后显示隐藏的div，我现在的问题是我对CS不太好，我的代码中有div的元素：

＆＃13;

$(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);
  });
});

＆＃13;

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

＆＃13;

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

＆＃13;

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

Answer 1

为什么不简单地使用fadeIn('slow')和fadeOut('slow')来代替

Answer 2

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

＆＃13;

$(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");
    });
});

＆＃13;

演示here。

Answer 3

正如jinder的正确说法，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鼠标悬停事件

3 个答案: