Question

我认为我有一个div（让我们称之为“A”）里面有两个div（“B”和“C”），div（“B”和“C”）都有5px的余量。 “C”div有一个style.display ='none'，所以首先你看不到它，我想做什么，在div“A”上使用onMouseOver事件，当我点击“B”时， C“出现，当我走到div”A“之外时，div”C“（显示：无）再次出现

以下是一些以更好的方式解决所有问题的代码：

<!DOCTYPE html>
<html lang="en">
 <head>
 <title>A.CAT</title>
 <meta charset="utf-8">
 </head>
 <body>
 <div id="A" onMouseOut="outA()">
   <div id="B" onClick="clickB()" class="buttonB">B</div>
   <div id="C" class="buttonC">C</div>
</div>

<script>
function outA()
{
   document.getElementById("C").style.display="none";
}

function clickB()
{
   document.getElementById("C").style.display="block";
}

</script>

<style>
.buttonB
{
  border: blue 2px solid;
  margin:5px;
}

.buttonC
{
  border: blue 2px solid;
  margin:5px;
  display:none;
}
</style>
</body>

问题是，当我走出div“B”以试图获得“C”，并且我通过了边界时，程序检测到我走出div“A”并执行函数out（），我无法达到div“C”

我试过使用指针事件：无，但我不能用C作为按钮。

Answer 1

请改用onMouseLeave：

 <div id="A" onMouseLeave="outA()">
   <div id="B" onClick="clickB()" class="buttonB">B</div>
   <div id="C" class="buttonC">C</div>
</div>

鼠标输出在这里不起作用，因为当您离开孩子并调用该功能时，鼠标输出事件将从孩子（B）冒出来。鼠标离开时不会从子项中冒出来，只有当您实际离开父项时才会调用该函数。

当我从一个div转到另一个div时，使用onMouseOver，div里面有两个div

1 个答案: