How to perform "a.hover" with a certain .class?

Question

What I want it to only perform -

a:hover {
background-color: #3b3b3b;
color: #d402d4;
}

with anything in a class.

I'll show an example excerpt of my code to help you better understand.

<a href="website2.html">
    <img alt="name" src="image.url" width=32" height="32">
    <br>
    <small>Name</small>
</a>

I only want -

a:hover {
background-color: #3b3b3b;
color: #d402d4;
}

to apply to <small>Name</small> but not <img alt="name" src="image.url" width=32" height="32">. My idea was to add a class to <small class="class1">Name</small>, and only perform a:hover { on that class. I am not sure if this is possible or if there is a more simpler way?

PS: hover is a pseudo class, it's written as `:hover`, not `.hover`. (Change your question's title) — ΔO 'delta zero', Nov 11 '20 at 19:02
@ΔO'deltazero' Sorry, I did right it like that in my code, I just missed it when writing this. Thank you — Victor Chavez, Nov 11 '20 at 19:04

score 1 · Accepted Answer · answered Nov 11 '20 at 19:05

You can do:

a:hover small {
    background-color: #3b3b3b;
    color: #d402d4;
}

or add a class in your small tag (recomended):

a:hover .your-small-class {
    background-color: #3b3b3b;
    color: #d402d4;
}

That way, when you hover the a tag, just the .class properties will change.

score 0 · Answer 2 · answered Nov 11 '20 at 19:00

0

Do you mean a:hover small { ... }, a:hover .class1 { ... } or something like this?

answered Nov 11 '20 at 19:00

ΔO 'delta zero'

3,506
1
19
31

```a:hover .class1 { ... }``` – Victor Chavez Nov 11 '20 at 19:02
Well? Is it working? – ΔO 'delta zero' Nov 11 '20 at 19:04
ah yes, thank you!... I'm clearly new to this. – Victor Chavez Nov 11 '20 at 19:06
You're welcome :) – ΔO 'delta zero' Nov 11 '20 at 19:38

How to perform "a.hover" with a certain .class?

2 Answers2