Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS Hover attribute on sub-element rather than entire element

Tags:

css

hover

element

Hopefully this makes sense - my html is as follows

html

<a href="#" class="someclass">An <span class="sub">Interesting</span> Link</a>

where the css is simply color information. What I'd like to do is to make it so when you mouseover the link as a whole only the "sub" information is affected by the hover attribute. While this would be easy enough to do in javascript I was curious as to whether or not css allowed for this behavior. If I were to try to write this it would probably look like

a:hover{
    .sub{color:newcolor};
}

however I've never seen anything like that and obviously it doesn't work

like image 294
dagoof Avatar asked Aug 03 '26 03:08

dagoof


2 Answers

a:hover .sub { color: newcolor }
like image 101
Pekka Avatar answered Aug 05 '26 20:08

Pekka


Like this:

a:hover .sub { color: #f00; }

If you need to apply it only to that specific class:

a.someclass:hover .sub { color: #f00; }
like image 35
Greg Avatar answered Aug 05 '26 18:08

Greg