NewCodeMan NewCodeMan - 8 months ago 84
CSS Question

How to have multiple hover classes on a single text class

I'm trying to use the least amount of CSS to create a single text

class
like this:

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


Be able to use that
class
multiple times in html body. But have unique
:hover
classes for each

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


I could just create multiple versions of the .film_tex style, like film_tex_01, film_tex_02 etc... with corresponding hover classes. But I was thinking there must be a better way.

Like this:

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

Answer Source

Use additional classes which you apply to the different HTML tags as a second class which have those different hover styles, like

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

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


.ho2:hover { 
    color:#ff03aa;
}
<div class="film_tex ho1">NAME</div>
<div class="film_tex ho2">HELLO</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download