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

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 <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;
}

Answer 2

Linking a div has worked for me simply by wrapping it in an a tag. Here is an example below with Bootstrap classes:

<a href="#">
<div class="col-md-4">

<span class="glyphicon glyphicon-send headericon"></span>

<p class="headerlabel">SEND</p>
<p class="headerdescription">Send candidate survey</p>    

</div> 
</a>

To change your div colour on hover add:

div:hover {
background-color: rgba(255,255,255,0.5);
}

to your CSS :)

Answer 3

.box:hover {
    background: #999;
    cursor: pointer;
}

When you hover the background changes to the color you want and cursor becomes pointer. You can trigger an event with jQuery like so:

$('.box').click(customFunction);

Answer 4

You can do it with CSS only:

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

Or with Javascript (I'm using jQuery in this example)

;(function($){
  $('.box').bind('hover', function(e) {
    $(this).css('background', 'blue');
  });
})(jQuery);