jQuery .hover（）outFunction闪烁错误

Question

我正在和朋友们一起做一个网站来进行课堂作业，但是由于某种原因，我的悬停功能的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>

出什么问题了，因为我读了jQuery的.hover()函数，并且我很确定它不应该这样工作。

Answer 1

为什么不使用纯CSS解决方案？还是必须使用JavaScript？

  

纯CSS解决方案

#hover:hover {
  background: grey;
}
      
#hover {
  position: absolute;
  left: 10px;
  height: 50px;
  z-index: 2;
  transition: background 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id = "header">
  <div id = "hover">
    <h6>WHAT IS A HYDROMETEOROLOGICAL BIOHAZARD?"</h6>
  </div>
</header>

Answer 2

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

.topics也使用不算作悬停的空白。您可以改用padding。

我准备了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>

Answer 3

您可以使用CSS并应用topics类的样式

$(document).ready(function() {
  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 {
  padding: 20px;
}

.topics:hover {
  background: grey;
  opacity: 0.25;
  transition: 0.4s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header id="header">
  <div id="hover">
  </div>
</header>