jquery .hover() outFunction flashing bug

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

您的悬停div 的索引大于您的 h6 或主题。这就是为什么当您的悬停div 出现在顶部时，您不再悬停 .topic，因为它位于悬停div下方。您需要将悬停div 的 z 索引设置为低于 .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>

Answer 2

为什么不使用纯 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 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>