Question

我尝试使用最少量的CSS来创建单个文本class，如下所示：

.film_tex {     
    font-family: 'CenturyGothicRegular', sans-serif;
    font-size: 0.8vw;
    color:#BFBFBF;  
}

能够在html正文中多次使用class。但是每个

都有唯一的:hover个类

.film_tex:hover { 
    color:#5F75C9;
}

我可以创建.film_tex样式的多个版本，例如film_tex_01，film_tex_02等......以及相应的悬停类。但我认为必须有更好的方法。

像这样：

<div class="film_tex" style="UNIQUE HOVER CLASS 01">NAME</div>
<div class="film_tex" style="UNIQUE HOVER CLASS 02">HELLO</div>

Answer 1

使用您应用于不同HTML标记的其他类作为具有不同悬停样式的第二个类，例如

＆＃13;

.film_tex {     
    font-family: 'CenturyGothicRegular', sans-serif;
    font-size: 1.8vw;
    color:#BFBFBF;  
}

.ho1:hover { 
    color:#5F75C9;
}


.ho2:hover { 
    color:#ff03aa;
}

＆＃13;

<div class="film_tex ho1">NAME</div>
<div class="film_tex ho2">HELLO</div>

＆＃13;

Answer 2

听起来你可以使用：nth-of-type选择器。你可以阅读它here

.film_tex:nth-of-type(1):hover {
  color:#5F75C9;
}

.film_tex:nth-of-type(2):hover {
   color:#ff03aa;
}

如何在单个文本类上拥有多个悬停类

2 个答案: