时间戳

首页 > 解决方案 > jquery .hover() outFunction 闪烁的bug

javascript - jquery .hover() outFunction 闪烁的bug

问题描述

我正在和我的朋友一起做一个网站来完成课堂作业，但由于某种原因，outFunction我的悬停功能部分表现得很奇怪。当鼠标进入元素时，这个灰色的div正方形会.fadeIn()在背景中淡入，然后立即淡出，.fadeOut()即使该部分只应该在人不再悬停在元素上之后出现。然后，它开始再次淡入然后淡出，依此类推。

$(document).ready(function() {
  $("#hover").hide()
  var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
  var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
  for (var i in topic_list) {
    var element = document.createElement("h6");
    var node = document.createTextNode(topic_list[i]);
    $(element).append(node);
    $(header).append(element);
    element.className = "topics";
    element.id = topic_list_id[i];
  }

  $(".topics").hover(function() {
    var x = $(this).position();
    $("#hover").css({
      "left": x.left,
      "width": $(this).outerWidth(true),
      "height": $(this).outerHeight(true)
    });
    $("#hover").fadeIn();
  }, function() {
    $("#hover").fadeOut();
  });
});
#hover {
  position: absolute;
  background: grey;
  opacity: 0.25;
  left: 10px;
  height: 100px;
  width: 100px;
  z-index: 2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div id="hover">
  </div>
</header>

有什么问题，因为我阅读了.hover()jQuery 的功能并且我很确定它不应该像这样工作。

标签： javascriptjqueryhtml

解决方案

您的悬停 div 的索引大于您的 h6 或主题。这就是为什么当您的悬停 div 出现在顶部时，您不再悬停 .topic，因为它位于悬停 div 下方。您需要将悬停 div 的 z-index 设置为低于 .topics 的索引，在本例中为-1。

.topics 还使用不计为悬停的边距。您可以改用填充。

我准备了 2 个片段；

$(document).ready(function() {
  $("#hover").hide()
  var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
  var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
  for (var i in topic_list) {
    var element = document.createElement("h6");
    var node = document.createTextNode(topic_list[i]);
    $(element).append(node);
    $(header).append(element);
    element.className = "topics";
    element.id = topic_list_id[i];
  }

  $(".topics").hover(function() {
    var x = $(this).position();

    $("#hover").css({
      "top": x.top,
      "bottom": x.bottom,
      "left": x.left,
      "width": $(this).outerWidth(true),
      "height": $(this).outerHeight(true)
    });

    $("#hover").fadeIn();
  }, function() {
    $("#hover").fadeOut();
  });
});
#hover {
  position: absolute;
  background: grey;
  opacity: 0.25;
  left: 10px;
  height: 100px;
  width: 100px;
  z-index: -1;
}

h6 {
  padding: 20px 0px 20px 0px;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin:0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div id="hover">
  </div>
</header>

或者，如果您真的只想突出显示元素，则可以只使用 CSS。修改元素的css 过渡属性以获得淡入淡出效果。

$(document).ready(function() {
  $("#hover").hide()
  var topic_list = ["WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?", "NATURAL DISASTERS", "OUR IDEAS", "CREDITS AND REFERENCES"];
  var topic_list_id = ["WHAT_IS_A_HYDROMETEOROLOGICAL_BIOHAZARD", "NATURAL_DISASTERS", "OUR_IDEAS", "CREDITS_AND_REFERENCES"];
  for (var i in topic_list) {
    var element = document.createElement("h6");
    var node = document.createTextNode(topic_list[i]);
    $(element).append(node);
    $(header).append(element);
    element.className = "topics";
    element.id = topic_list_id[i];
  }
});
h6:hover {
  background-color: rgba(0, 0, 0, 0.2);
}

h6 {
  transition: 0.4s;
  margin: 0px;
  padding: 20px 0px 20px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div id="hover">
  </div>
</header>

推荐阅读