1

我有以下 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;}

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

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

4

2 回答 2

6 
.title:hover {
    color:#D01A13;
}

空格在 CSS 中很重要。空格是“children”操作符，所以.title :hover意思是“当任何孩子.title悬停时”。文本节点不算作子节点。

这是一个小提琴。

回复您的评论：

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

当然，你可以试试

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

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

于 2013-09-09T00:42:03.613 回答
-1

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

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

不仅仅是在.wrapper需要时应用 css 样式。

于 2013-09-09T00:46:42.310 回答