Highlight div box on hover

css, html, twitter-bootstrap

Solution

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 `<a></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;
}

Problem

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 someone hovers their mouse over this area, it changes the background to a slightly darker colour and makes it a clickable area?

Original source