Question

假设有一个id为“hello”的div。它有一定的CSS，例如display：none;。我希望它改为display：block;每当鼠标悬停在某个元素（例如li）上时，无论该元素在哪个网页中，无论是哪个类或id，与其关联的css或javascript，无论该元素是什么容器，无论该容器的id或类是什么，它是否在另一个元素内部，如li里面的ap，是否在其中有另一个元素，如li里面的ap，............等等

只要它在网页上，我希望它克服所有障碍，绝对一直都有效。

但我无法弄清楚这个问题，所以请提前帮助谢谢。

Answer 1

我们假设这是您的<div>元素：

<div id="myDiv" style="width:100px; height:100px; background:#AAAAAA">
  <!-- Your div content here -->
</div>

现在你必须添加这个javascript：

// Change color of div on hover
function hover() {
  document.getElementById('myDiv').style.background = "#FFAAAA";
}

// Return the color back to original when the mouse leaves the li
function retorg() {
  document.getElementById('myDiv').style.background = "#AAAAAA";
}

var lists = document.getElementsByTagName('li');
// Add event handlers to the li elements
for (var i = 0; i < lists.length; i++) {
  lists[i].addEventListener("mouseover", hover);
  lists[i].addEventListener("mouseout", retorg);
}

当将鼠标悬停在整个网页中任何位置的某个元素上时，如何更改具有特定ID的div的css？

1 个答案: