Isaiah Bugarin Isaiah Bugarin - 21 days ago 6
CSS Question

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

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?

Answer

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>