CSS Hover attribute on sub-element rather than entire element

Question

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

SLaks · Accepted Answer · 2009-11-11 23:26:09Z

13

a:hover .sub { color: newcolor }

edited Nov 11, 2009 at 23:26

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

answered Nov 11, 2009 at 23:25

Pekka

451k150 gold badges990 silver badges1.1k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Greg · Accepted Answer · 2009-11-11 23:25:41Z

4

Like this:

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

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

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

answered Nov 11, 2009 at 23:25

Greg

323k55 gold badges378 silver badges338 bronze badges

Collectives™ on Stack Overflow

CSS Hover attribute on sub-element rather than entire element

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related