The CSS selector "hover" is not working on my HTML code

Question

For some reason, my :hover isn't working. Here's my CSS code:

.image:hover
{
    border:#000000;
    background-color:#FF66FF;
    box-shadow:rgb(0,255,153);
}

And my HTML

 <div id="header">
    <a href="index.html"><img src="header.png" class="image" onload="ChangeColors(this)" /></a>
 </div>

Any ideas on why this isn't working?

@AntonyScott Firefox. elclanrs: It's a function that changes the color of my logo to a random color (not related). — Isaiah Bugarin
– Isaiah Bugarin, Commented Feb 21, 2012 at 0:48
A note: you can omit the <a>...</a> and merge href into the img tag, and it has the same effect. — Chris Dennett
– Chris Dennett, Commented May 10, 2012 at 22:09

Zoltan Toth · Accepted Answer · 2016-11-17 18:21:49Z

2

It's working - you just have to correct your CSS rules.

For border you have to specify its width and style, not just color. Same for the box-shadow - the color itself isn't enough.

.image:hover {
  border: 2px solid #000000;
  background-color:#FF66FF;
  box-shadow: 10px 10px 5px rgb(0,255,153);
}

<div id="header">
  <a href="index.html"><img src="http://placehold.it/300x150" class="image" /></a>
</div>

edited Nov 17, 2016 at 18:21

answered Feb 21, 2012 at 0:48

Zoltan Toth

47.8k12 gold badges132 silver badges138 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Isaiah Bugarin Over a year ago

Thanks... I felt kinda dumb not being able to work out a problem as simple as that lol.

John Doherty · Accepted Answer · 2012-02-21 00:46:18Z

0

The class="image" needs moving to your A tag

answered Feb 21, 2012 at 0:46

John Doherty

4,17540 silver badges40 bronze badges

Comments

icyrock.com · Accepted Answer · 2012-02-21 00:48:12Z

0

Seems to be working just fine:

http://jsfiddle.net/DpBRY/

You have some pink background on hover... Firefox 11.0 on Ubuntu 11.10 here.

Here's an update for border and box-shadow:

http://jsfiddle.net/DpBRY/2/

but you can of course tune to your taste. Hope this helps.

answered Feb 21, 2012 at 0:48

icyrock.com

28.7k4 gold badges72 silver badges92 bronze badges

Comments

jonathanbell · Accepted Answer · 2012-02-21 00:52:41Z

0

Perhaps header.png is not transparent?

answered Feb 21, 2012 at 0:52

jonathanbell

2,6477 gold badges25 silver badges41 bronze badges

1 Comment

jonathanbell Over a year ago

I notice you are trying to change its background color.

Collectives™ on Stack Overflow

The CSS selector "hover" is not working on my HTML code

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related