简体   繁体   中英

CSS Hover attribute on sub-element rather than entire 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

a:hover .sub { color: newcolor }

Like this:

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

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

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM