Highlight div field on hover

Question

Say I have a div with the following attributes:

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

How can I make it so that if someone hovers over this area, it changes the background to a slightly darker color and makes it available to view the area?

Answer 1

CSS only:

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

To make it an “interactive” area, you will want to place the <a></a> tag inside the div, and you can use jQuery to set the href attribute.

jQuery Solution

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

Third solution: You can change the cursor and also give it a click event using jQuery:

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

Use the above with the following CSS:

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

Answer 2

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

When you hover the background image on the color you need, and the cursor becomes a pointer. You can trigger an event using jQuery as follows:

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

Answer 3

Binding a div worked for me simply by wrapping it with an a tag. The following is an example 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 the color of a div on hover, add:

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

to your CSS :)

Answer 4

You can only do this with CSS:

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

Or with Javascript (I use jQuery in this example)

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