Jump to content

Highlight Image


locbtran
 Share

Recommended Posts

I have this:

img.decor{	text-decoration:none;	border:#CCCCCC thin solid;	padding: 4px;}

My HTML:

<a href="google.com"><img class="decor" src="images/birds.jpg" /></a>

when I hover over the image "decor" in my CSS, I would like the whole image to turn grey. I tried this:

img.decor a:hover{background-color:#CCCCCC;}

but it doesn't work. Any ideas?? I just start learning CSS. thanks

Link to comment
Share on other sites

That won't work. If you want the image to lighten and get translucent, explore opacity. If you literally want the space to turn gray, with no image visible at all, you might try adding this rule:img.decor:hover {visibility: hidden;}Keep the background rule for the a:hover in that case

Link to comment
Share on other sites

Just so you know, this:img.decor a:hover{...will look for an anchor tag (being hovered) that is a descendant of an image with classname 'decor'.An image can never have descendants, so this selector will never work. You might want to give the anchor a class name too. Then you can just do something like this:a.imgLink:hover {

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...