CODEWITHSUNDEEP
htmlcsscss-selectors
NewCodeMan
NewCodeMan

Reputation: 227

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>

Upvotes: 1

Views: 32

Answers (2)

brandenbuilds
brandenbuilds

Reputation: 23

Sounds like you could use the :nth-of-type selector. You can read about it here

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

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

Upvotes: 2

Johannes
Johannes

Reputation: 67768

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>

Upvotes: 4

Related Questions