本教程详细讲解如何在鼠标悬停于父元素时，通过javascript动态切换两个子元素的可见性，实现图标或其他内容的无缝替换效果。针对直接使用css :hover无法切换 display:none 元素的限制，我们采用 onmouseenter 和 onmouseleave 事件来精确控制元素的 display 属性，确保交互的流畅与准确。
理解问题：为什么直接的CSS :hover 不奏效？
在网页开发中，我们经常需要实现鼠标悬停（hover）时元素的视觉变化。一个常见的需求是，当鼠标悬停在一个区域上时，显示一个图标并隐藏另一个图标，例如，一个“打开的锁”图标变为“关闭的锁”图标。
最初的尝试可能是在CSS中直接对两个图标元素使用 :hover 伪类，并结合 display: none; 和 display: block; 来控制它们的可见性。例如：
#item-datasafety-lock-open {
display: block; /* 默认显示打开的锁 */
}
#item-datasafety-lock-open:hover {
display: none; /* 悬停时隐藏打开的锁 */
}
#item-datasafety-lock-closed {
display: none; /* 默认隐藏关闭的锁 */
}
#item-datasafety-lock-closed:hover {
display: block; /* 悬停时显示关闭的锁 */
}然而，这种方法通常无法达到预期效果。原因在于，一个设置为 display: none; 的元素在DOM中不占据任何空间，也无法接收到鼠标事件，包括 hover 事件。因此，当鼠标悬停在 display: none; 的 #item-datasafety-lock-closed 元素上时，它根本不会触发 :hover 状态，也就无法被显示出来。我们需要一种机制，能够感知到鼠标进入了包含这两个图标的 父元素，然后根据这个状态来切换子元素的可见性。
解决方案：利用JavaScript事件监听父元素
为了解决上述问题，我们可以利用JavaScript的 onmouseenter 和 onmouseleave 事件监听父元素。当鼠标进入父元素区域时，我们执行一个JavaScript函数来显示一个图标并隐藏另一个；当鼠标离开父元素区域时，我们执行另一个函数来恢复初始状态。
立即学习“Java免费学习笔记（深入）”；
HTML结构
首先，确保你的HTML结构中包含一个父容器，其中包含两个需要切换的子元素（例如，带有不同图标的 标签）。在这个例子中，我们有一个 div 元素作为父容器，并为其添加了 id 属性以便于JavaScript访问，同时绑定了 onmouseenter 和 onmouseleave 事件。
注意： 初始状态下，我们会在CSS或JavaScript中控制 item-datasafety-lock-closed 元素默认是隐藏的。
CSS样式
CSS主要用于设置元素的初始可见性。我们确保默认情况下“打开的锁”是可见的，而“关闭的锁”是隐藏的。
/* 确保默认显示打开的锁 */
#item-datasafety-lock-open {
display: block;
}
/* 确保默认隐藏关闭的锁 */
#item-datasafety-lock-closed {
display: none;
}
/* 其他相关样式，如父元素的hover背景色等 */
#context-menu .item:hover {
background: #555;
}JavaScript逻辑
核心逻辑在于定义两个JavaScript函数：一个用于鼠标进入父元素时，另一个用于鼠标离开时。这些函数将直接操作两个图标元素的 display 属性。
// 当鼠标进入父元素时，显示关闭的锁，隐藏打开的锁
function showClosedLock() {
document.getElementById("item-datasafety-lock-open").style.display = "none";
document.getElementById("item-datasafety-lock-closed").style.display = "block";
}
// 当鼠标离开父元素时，显示打开的锁，隐藏关闭的锁
function showOpenLock() {
document.getElementById("item-datasafety-lock-open").style.display = "block";
document.getElementById("item-datasafety-lock-closed").style.display = "none";
} 
