嵌套 DIV:当子项悬停时禁用对父项的悬停效果
在此场景中,您有两个嵌套 DIV 元素,标记为“ .parent”和“.child”。将鼠标悬停在“.parent”上时,您希望更改其背景颜色。但是,将鼠标悬停在“.child”上时,您希望“.parent”恢复为默认的灰色背景。
父级和子级悬停效果的 CSS 代码:
<code class="css">.parent { width: 100px; height: 100px; padding: 50px; background: lightgray; } .parent:hover { background: lightblue; } .child { height: 100px; width: 100px; background: darkgray; } .child:hover { background: lightblue; }</code>
问题:
上面的 CSS 代码成功地将所需的悬停效果应用于“.parent”和“.child”。但是,它没有解决当“.child”悬停时禁用“.parent”悬停效果的要求。
使用同级元素的解决方案:
事实证明,CSS 没有提供直接的方法来通过嵌套元素实现这种效果。但是,您可以使用同级元素来采用巧妙的解决方法。
使用 Sibling 元素更新了 CSS:
<code class="css">.parent { ... (unchanged) } .child { ... (unchanged) } .sibling { position: relative; width: 100px; height: 100px; padding: 50px; top: -50px; left: -50px; background: #3D6AA2; transition: background-color 1s; } .sibling:hover { background: #FFF; }</code>
工作原理:
当鼠标光标悬停在“.child”上时,“.child”的背景颜色会发生变化。同时,“.sibling”的背景颜色也会由于悬停效果而发生变化。由于“.sibling”覆盖了“.child”,因此其背景颜色的更改有效地覆盖了应用于“.parent”的悬停效果。这给人一种“.parent”上的悬停效果已被禁用的错觉。
以上是将鼠标悬停在嵌套 DIV 中的子元素上时如何防止父级悬停效应?的详细内容。更多信息请关注PHP中文网其他相关文章!