:hover 可以修改外部 CSS 类吗？
在 CSS 中，我们可以使用 :hover 选择器将样式更改应用于悬停时的元素。但是，如果我们想在悬停另一个元素时修改不同类中元素的 CSS，该怎么办？
由于 CSS 选择器仅根据 DOM 中的层次结构或关系来定位元素，因此不可能直接修改当前悬停元素范围之外的元素的 CSS。
间接修改选项
但是，有一些间接方法可以实现类似的效果：
.item:hover .wrapper {
/* Styles to be applied to '.wrapper' when '.item' is hovered */
}.item:hover ~ .wrapper {
/* Styles to be applied to '.wrapper' when '.item' or any of its siblings is hovered */
}JavaScript 解决方案
如果 CSS 解决方案不可行，您可以使用 JavaScript 来操作基于 E 的 CSS 属性
<code class="javascript">document.querySelector('.item').addEventListener('mouseenter', () => {
document.querySelector('.wrapper').style.backgroundColor = 'red';
});
document.querySelector('.item').addEventListener('mouseleave', () => {
document.querySelector('.wrapper').style.backgroundColor = '';
});</code>结论
虽然 CSS 选择器本身无法直接修改外部类，但父子或兄弟关系以及 JavaScript 提供了间接的解决方案达到类似的效果。
以上是:hover 可以修改外部 CSS 类吗？的详细内容。更多信息请关注PHP中文网其他相关文章！
