Member Avatar for hiyatran

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

  • 2 Contributors
  • 1 Reply
  • 42 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by ko ko
Member Avatar for ko ko

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

The syntax is a little bit wrong. In your HTML, the image tag is the child of the anchor tag. So it should be img.decor:hover or a:hover img.decor . Place the parent element or selector first, and the childs in the next hierarchically, as the structure of the HTML element nodes. http://www.w3schools.com is the pretty place for beginners.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.