javascript - 在悬停另一个元素时更改元素样式

Question

我有以下 HTML 代码:

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

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

问题是当我放置 CSS 规则时

.title :hover {color:#D01A13;}

只有 spantext 在悬停时和我输入代码时改变颜色

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

如果我将鼠标悬停在 spantext 上，nonspantext 会改变颜色，但我也希望发生相反的情况。

我知道 CSS 中的“+”和“~”规则，但我无法让它发挥作用。

Answer 1

.title:hover {
    color:#D01A13;
}

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

Here is a fiddle.

---

回复你的评论:

Ok, this code is good, I did not know about spaces in CSS. But, forgot to mention that there is also a rule .title span {color:#888888 !important;} that complicates the things a little bit. If I cannot change this rule, is there any chance that the .title can change color on hover?

当然可以，你可以试试

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

当然，这是非常丑陋的。这就是为什么您应该尽可能少地使用 !important 的原因。 Fiddle