将鼠标悬停在另一个元素上时更改元素样式

Change element style on hover of another element

本文关键字：元素 样式 悬停 另一个 鼠标      更新时间：2023-09-26

>我有以下HTML代码：

   <div> class="module-title" 
     <h2 class="title" style="visibility: visible;">
         <span>Spantext</span> 
         Nonspantext
    </h2>
   </div>

我想做的是将鼠标悬停在 h2 元素以及 spantext 和非spantext上以更改颜色。我的限制是我不能将非spantext放在span标签中（我根本无法更改HTML代码）。

问题是当我放置 CSS 规则时

.title :hover {color:#D01A13;}

只有 spantext 在悬停时和当我放置代码时会改变颜色

.module-title :hover {color:#D01A13;}

如果我将鼠标悬停在跨度文本上，非西班牙语文本将改变颜色，但我也希望发生相反的情况。

我知道 CSS 中的"+"和"~"规则，但我无法让它工作。

.title:hover {
    color:#D01A13;
}

空格在 CSS 中很重要。空格是"子"运算符，因此.title :hover表示"当.title的任何子级悬停时"。文本节点不计为子节点。

这是一个小提琴。

重新发表您的评论：

好的，这段代码很好，我不知道CSS中的空格。但是，忘了提到还有一个规则.title span {color：#888888 ！important;} 使事情变得有点复杂。如果我无法更改此规则，.title 是否有可能在悬停时更改颜色？

当然，你可以尝试

.title:hover, .title:hover span {
    color:#D01A13 !important;
}

当然，这是非常丑陋的。这就是为什么你应该尽可能少地使用!important。小提琴

jQuery 方法来做到这一点，通过将内部内容包装在另一个div 中并将样式应用于该div：

$('h2.title').wrapInner('<div class="wrapper" />');

如果需要，而不仅仅是将 css 样式应用于.wrapper。

相关文章：