Question

我有一个代码：

＆＃13;

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

＆＃13;

如果将鼠标悬停在第一行上，则会显示第二行。如果你将鼠标放在第一行之外（并且足够慢），那么第二行就会消失。

我需要什么：在你徘徊在第一行并且出现第二行之后，只有当光标在第一行或第二行之外时，第二行必须消失。这意味着，如果将鼠标从第一行移动到第二行，后者不应该消失。目前确实如此。

我尝试了以下内容：

＆＃13;

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

＆＃13;

并被建议执行以下操作：

＆＃13;

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

＆＃13;

没有帮助。所有这些变体都不起作用。解决方案是什么？

Answer 1

您可以使用上一个示例，只需将<span>代码更改为<div>代码即可。或者，如果您想将它们保留为<span>标记，则可以将#one,#two { display:block; }添加到您的css中以使其阻止项目（因此它们将像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>

如何使“onmouseout”事件“理解”，“跨度”高度增加了？

1 个答案: