Highlight div box on hover

Question

Say I have a div with the following attributes:

.box {
  width: 300px;
  height: 67px;
  margin-bottom: 15px;
}

How would I make it so that if

Answer 1

CSS Only:

.box:hover{
background: blue; /* make this whatever you want */
}

To make it a 'clickable' area, you're going to want to put a tag inside the div, and you may want to use jQuery to set the href attribute.

jQuery Solution

$('.box').hover(function(){
$(this).css("background", "blue");
$(this).find("a").attr("href", "www.google.com");
});

A third solution: You could change the cursor, and also give it a click event using jQuery:

$('.box').click(function(){
// do stuff
});

Use the above along with the following CSS:

.box{
background: blue;
cursor: pointer;
}