7 replies [Last post]
djhomeless
Offline
newbie
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-11-23
Posts: 4
Points: 0

Hi All,
I'm self taught in CSS, so apologies if this is a simple question for everyone!

I've implemented a:hover color scheme that simply throws an orange background behind each link.

The problem is that I have images that are linked on the page as well. When hovering over these images, I get the same background color.

What I'd like to do is not use a background color when an image is used. I've tried a variety of different variations, but so far no luck. This is what I thought would work:

 
a:hover img 
{ 
background-color: none; 
}


Basically, I know that I don't need to change how the img is styled, I just need a way to NOT use the default a:hover style when an image is used with an href.

Any ideas? Thanks in advance!

Geoffrey

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A problem with a:hover when using an image

CSS doesn't allow you to apply styles to a parent based on a child.

You will need a method of identifying the <a> tags which contain images, either by using a descendent selectors (the image links all appear within a particular container which doesn't have any non-image links or vice versa) or by applying a class to the image links, the non-image links or both.

djhomeless
Offline
newbie
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-11-23
Posts: 4
Points: 0

A problem with a:hover when using an image

That did it.

Basically I had two types of links in my sidebar, one with simple href's, and others had links+images.

So I created a simple div class to wrap around the text href's so my images would not be affected.

Wouldn't it have been simplier to create a class to use on the individual href to disable this? In other words, considering 80% of my links in the sidebar are text links, shouldn't I be applying a style to the image links, as opposed to the text links themselves?

Thanks Again.

Geoffrey

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 33 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A problem with a:hover when using an image

djhomeless wrote:
Wouldn't it have been simplier to create a class to use on the individual href to disable this?

Apparently not, or you would have done it that way Smile

I am not entirely sure what you are getting at, I did mention using a class in my post as one alternative. Using descendent selectors where appropriate is simpler than using classes - your html will be smaller and your style sheet unchanged. Possibly the browser will be a couple of nano seconds slower doing it one way over the other, nothing noticeable.

Classes can be used anywhere. If that flexibility isn't needed use a descendent selector.

djhomeless
Offline
newbie
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-11-23
Posts: 4
Points: 0

A problem with a:hover when using an image

As I'm self taught, I have no idea what a decendant selector is.

I think you are referring to something like this:

#sidebar ul li {something;}

My sidebar uses a class structure that puts each individual element (such as 'Site Map' and 'Categories') inside a ul/li. As thus, it wouldn't have been possible to establish a class just around the fragments that contained text links, as each fragment could in theory contain text and image links.

For the moment, my div class is just a kludge until I can think of a better way of doing it. Wink

Here is my site so you can get a jist of what I'm talking about: www.idiotabroad.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A problem with a:hover when using an image

We are probably mostly all self taught you can't learn this sort of stuff effectively in a classroom! being self taught means that one uses the vast resources of the web to look up things like 'descendent' selectors to further our understanding Smile

A descendent selector selects based on the element belonging to a number of ancestral/parent elements, your example is about right , remember to read them right to left and that when written it is not a child or sibling selector in other words descendent selectors will apply the rules for an element no matter how deep they occur in a given list of elements, and can be a stumbling point for some.

#somediv ul a {} will apply rules to any anchors it finds as long as they are nested within a ul that in turn has a ancestor called #somediv.

Your class .sidehover is probably largely unnecessary.

Wordpress does tend to over class/ID everything and it can be a bugger to find the generated html and classes amongst all the many php files and if changed can be a pain when it comes to having to update your files as the changes can get overwritten.

Incidently you should not be using the xhtml 1.1 DocType, drop it down to 1.0 and I would validate and clear up the RDF errors.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

djhomeless
Offline
newbie
London
Last seen: 15 years 24 weeks ago
London
Joined: 2005-11-23
Posts: 4
Points: 0

A problem with a:hover when using an image

Hugo wrote:
We are probably mostly all self taught you can't learn this sort of stuff effectively in a classroom!

Indeed! I am just glad there are so many knowledgeable and helpful people out there looking out for noobs like me. Smile

Hugo wrote:

#somediv ul a {} will apply rules to any anchors it finds as long as they are nested within a ul that in turn has a ancestor called #somediv.

I'm not sure if that would work in my case. Each element along my sidebar is set within a #somediv ul, so how could I differentiate between a href's that were text links, and those that used images?

Hugo wrote:

Wordpress does tend to over class/ID everything...

Actually my biggest beef is that the admin and site css, which are called collectively when scolling around the admin pages have multiple class conflicts. And for some reason, you have a conflict, the site stylesheet wins out. But thats another thread. Smile

Hugo wrote:

Incidently you should not be using the xhtml 1.1 DocType, drop it down to 1.0 and I would validate and clear up the RDF errors.
Hugo.

What RDF errors? My site seems to validate fine

Thanks All!

Geoffrey

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 17 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

A problem with a:hover when using an image

I guess in your circumstance one would use the class but placed on the image rather than the text links, it's good practise to attempt to deal with things using descendent selectors where possible rather than as many do by bloating the markup with hooks.

I've had a lot of conflicts with wordpress Smile was never happy ( as many others weren't) with the whole file layout and html generation and the in fighting last year became tedious, but there is something I do like about it once you strip away the default coding and do your own thing.
Nonetheless I'm at the moment playing with Textpattern Smile

Ah begging your pardon it does indeed validate, for some reason HTML-Tidy has a problem with it; regardless you shouldn't use XHTML 1.1 unless your serving it correctly as application/xhtml+xml along with the xml prolog or not if served as it should be as utf-8.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me