Question

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

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

如果有人将鼠标悬停在此区域上，它会将背景更改为稍暗的颜色并使其成为可点击区域？

Answer 1

仅限CSS：

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

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

jQuery解决方案

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

第三种解决方案： 你可以改变光标，并使用jQuery给它一个click事件：

$('.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);

突出显示悬停时的div框

4 个答案: