Question

是否可以在div上使用悬停效果添加条件格式以更改类：

.resize:hover {
   height: 360px;
   z-index: 1;

   .font_white {
   color: blue;
   }
}


.font_white{
   color: white;
}

是否可以在使用resize类悬停div时覆盖font_white？这些课程是独立的div。

Answer 1

不，不是，不使用纯CSS。

您可以使用JS，但如果没有标记代码，很难说最好的方法是什么。

（当然，如果要在你悬停的div中应用字体颜色，它只能使用CSS，虽然不是你描述的方式。但我想你想通过悬停触发整个页面的样式更改一个div。）

Answer 2

没有通用的方法来实现CSS。

如果您可以编写一个选择器，该选择器既匹配resize类成员的元素又作为font_white类成员的元素（使用{{{}} 3}}如后代，孩子或兄弟姐妹）然后你可以使用组合器来实现它。

例如：

.resize:hover ~ .font_white { ... }

如果你的HTML看起来像是这样的话，

会起作用：

<button class="resize">Hover Me</button>
<section id="first">...</section>
<section id="second" class="font_white">...</section>
<section id="third" class="font_white">...</section>

您需要为特定的HTML选择合适的组合器。

Answer 3

如果你重写CSS，你会发现你想要的效果是可能的 - 并且可以在不重新定义你的类的样式声明的情况下实现。

示例：

.primary-text { color: white; } .resize:hover { height: 360px; z-index: 1; } .resize:hover .primary-text { color: blue; }

条件css格式

3 个答案: