html - 悬停时突出显示 div 框

Question

假设我有一个具有以下属性的 div：

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

我将如何做到这一点，如果有人将鼠标悬停在该区域上，它将背景更改为稍暗的颜色并使其成为可点击区域？

Answer 1

仅 CSS：

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

要使其成为“可点击”区域，您需要<a></a>在 div 中放置一个标签，并且您可能需要使用 jQuery 来设置该href属性。

jQuery 解决方案

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

第三种解决方案： 您可以更改光标，并使用 jQuery 给它一个点击事件：

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

将上述内容与以下 CSS 一起使用：

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

Answer 2

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

当您将鼠标悬停时，背景会变为您想要的颜色，光标变为指针。您可以使用 jQuery 触发事件，如下所示：

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

Answer 3

只需将 div 包装在a标签中，链接 div 就对我有用。下面是一个带有 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>

要更改悬停时的 div 颜色，请添加：

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

到你的 CSS :)

Answer 4

您只能使用 CSS 来完成：

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

或者使用 Javascript（我在这个例子中使用 jQuery）

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