/    Sign up×
Community /Pin to ProfileBookmark

trying to create a hover for a span, inside of an anchor tag

Hey Everyone,
I have a situation where I have an image and text inside of an anchor tag. Currently the text is inside
of a span (with a bg image) which is nested inside the a (anchor) tag. I’m trying to style where the text changes color once the mouse is
inside in the a tag, but outside the span tag.

I have not figure out how to do this. Is this not possible with CSS?

here’s the online example:

[url]http://www.tomcarden.net/ats_mock/training_mockup.html[/url]

thanks for any help with this,

Tom

to post a comment
CSS

3 Comments(s)

Copy linkTweet thisAlerts:
@cootheadMar 30.2011 — Hi there toptomato,

if you want the text to change color when hovering the [b]a element[/b] change this...
[color=navy]
a.subcat:hover {color:#fff}
[/color]

...to this...
[color=navy]
a.subcat:hover span{color:#fff}
[/color]

If you want the text to only change color when hovering over the "Placeholder Image" use this...
[color=navy]
a.subcat:hover span{color:#fff}
a.subcat span:hover {color:#dfbf08}
[/color]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@toptomatoauthorApr 04.2011 — Belated thank you, that worked.

But i'm confused why.

.subcat is a class of a div and not an 'a' so why wouldn't be this

.subcat a span:hover ??, or .subcat a {}
Copy linkTweet thisAlerts:
@rockTheSkyApr 05.2011 — Belated thank you, that worked.

But i'm confused why.

.subcat is a class of a div and not an 'a' so why wouldn't be this

.subcat a span:hover ??, or .subcat a {}[/QUOTE]

In the example the anchor tag has a class called subcat. Inside that anchor tag is text inside a span tag with no class or id. So you need to be specific in the css as far as that.

The text changes colour because the css is specific as far as the span; otherwise it won't change colour.
×

Success!

Help @toptomato spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...