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上，那么非全局文本将会改变颜色，但我也希望发生相反的情况。

我知道CSS中的'+'和'〜'规则，但我无法使其正常工作。

Answer 1

.title:hover {
    color:#D01A13;
}

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

Here is a fiddle.

重新评论：

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

当然，你可以试试

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

当然，这非常难看。这就是为什么你应该尽可能少地使用!important。 Fiddle

Answer 2

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

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

如果需要，只需将css样式应用于.wrapper。

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

2 个答案: