A couple of days ago I wrote a post talking about CSS3 Selectors and how they are really going to help out us developers. Today a full implementation could come in handy because I’ve got this unwanted hover effect on any image I put in posts. Let me give you the background on what I’m talking about…
If you put your mouse cursor over (most) any link on my site, you should find that the link’s background color changes to a shade of blue and the text turns white. I accomplish this with basic CSS:
background-color: #00f;
color: #fff;
}
(Note: the colors on the site I actually use my be a little different) The “:hover” pseudo-class tells the browser whenever a user puts their cursor over an element utilizing the particular style, use the values you’ve defined. When the user moves away from that element, the style goes away. So you can see the link effect I was talking about. Now my problem comes when I insert an image into a post because my blog software automatically wraps images with anchor (a) tags so that if you click on the image, it’ll direct you to a larger view. Because the site uses the style I’ve defined above, as soon as you hover over the image, it’ll show a tiny bit of blue underneath the image! Not what I’m looking for.
Here is where the selectors can come into play because I should be able to use the following:
background-color: transparent;
}
That selector I’m using says for any anchor tags that contains a child element which is an image (img) use that style. But for whatever reason, my browser is not picking it up. I haven’t had much time today to investigate why it’s not working, could be a browser issue or I could just have the incorrect syntax but I’m going to figure it out eventually! Once I do, I’ll fill you all in on the details.