作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
javascript - 如何使 'onmouseout' 事件 "understand"增加 "span"高度？
转载
作者：行者123
更新时间：2023-11-28 08:14:35
24
4
24
4
我有一个代码:
<span id="one" onmouseover="AddString()" onmouseout="RemoveString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
document.getElementById("two").innerHTML = 'Second Line';
}
function RemoveString() {
document.getElementById("two").innerHTML = '';
}
</script>如果将鼠标悬停在第一行上，则会出现第二行。如果您将鼠标移出第一行(并且速度足够慢)，那么第二行就会消失。
我需要什么:将鼠标悬停在第一行上并且第二行出现后，只有当光标位于第一行或第二行之外时，第二行才必须消失。这意味着，如果将鼠标从第一行移动到第二行，后者不应该消失。目前是这样。
我尝试了以下方法:
<span id="one" onmouseover="AddString()">First Line
<span id="two" style="display:block"></span>
</span>
<script>
function AddString() {
var element = document.getElementById("one");
element.removeEventListener("mouseover", AddString);
document.getElementById("two").innerHTML = 'Second Line';
element.addEventListener("mouseout", RemoveString, true);
}
function RemoveString() {
var element = document.getElementById("two");
element.removeEventListener("mouseout", RemoveString);
element.innerHTML = '';
element.addEventListener("mousever", AddString, true);
}
</script>并被建议执行以下操作:
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<span id="one">First Line</span>
<span id="two">Second Line</span>
</body>
</html>没有帮助。所有这些变体都不起作用。解决方案是什么？
最佳答案
您可以使用上一个示例，只需更改 <span>标记为 <div>标签，它没有问题。或者，如果您想将它们保留为 <span>您可以添加的标签 #one,#two { display:block; }添加到您的 CSS 中，使它们成为 block 元素(因此它们无论如何都会像 div 标签一样工作)。您还可以限制 div 的宽度，以确保当您将鼠标悬停在该行的任意位置时它不会出现。
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#one,#two { width: 100px; background-color: beige; }
#one:hover+#two,#two:hover {
display: block;
}
#two{
display: none;
}
</style>
</head>
<body>
<div id="one">First Line</div>
<div id="two">Second Line</div>
</body>
</html>关于javascript - 如何使 'onmouseout' 事件 "understand"增加 "span"高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29061814/
24
4
0
我是一名优秀的程序员,十分优秀！