Highlight div hộp trên di chuột

Question

Nói rằng tôi có một div với các thuộc tính sau:

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

Làm thế nào tôi có thể làm cho nó để nếu ai đó di chuột của họ trên khu vực này, nó thay đổi nền để màu hơi sẫm màu và biến nó thành khu vực có thể nhấp?

Answer 1

CSS Chỉ:

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

Để làm cho nó một khu vực 'có thể nhấp', bạn sẽ muốn đặt một thẻ <a></a> bên trong div, và bạn có thể muốn sử dụng jQuery để thiết lập href thuộc tính.

jQuery Giải pháp

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

Một giải pháp thứ ba: Bạn có thể thay đổi con trỏ, và cũng có thể cung cấp cho nó một sự kiện nhấp chuột sử dụng jQuery:

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

Sử dụng trên cùng với CSS sau:

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

.210

Answer 2

Bạn có thể làm điều đó với chỉ CSS:

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

Hoặc với Javascript (Tôi đang sử dụng jQuery trong ví dụ này)

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

Answer 3

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

Khi bạn di chuyển thay đổi nền cho màu bạn muốn và con trỏ trở thành con trỏ. Bạn có thể kích hoạt một sự kiện với jQuery như vậy:

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

Answer 4

Liên kết một div đã làm việc cho tôi chỉ đơn giản bằng cách gói nó trong một thẻ. Dưới đây là một ví dụ dưới đây với các lớp Bootstrap:

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

Để thay đổi màu div của bạn trên di chuột add:

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

đến CSS của bạn :)