悬停时突出显示 div 框答案

【问题标题】：Highlight div box on hover悬停时突出显示 div 框
【发布时间】：2013-03-25 20:36:33
【问题描述】：

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

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

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

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案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 给它一个点击事件：

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

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

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

【讨论】：

如果我想在你将鼠标悬停在周围 5px 的 div 上而不搞乱周围事物的位置时有一个边框怎么办？
@ShadyPotato 如果添加边框，它将添加到元素宽度。你需要考虑到这一点。
假设我有 300px x 67px 的 div，并且在这个 div 的上方和下方有相同的 div。我将如何做到这一点，如果您将鼠标悬停在 div 上，它会按照您的建议突出显示它，但使其突出显示比 div 大小大 5px？
@ShadyPotato 我只想使用 jQuery 更改宽度和高度属性，只是意识到您将不得不相应地进行调整，这样页面上的其余元素就不会遍布地点。

【解决方案2】：

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

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

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

【讨论】：

【解决方案3】：

链接一个 div 对我来说很有效，只需将它包装在一个 a 标记中。下面是一个带有 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 :)

【讨论】：

【解决方案4】：

你可以只用 CSS 做到这一点：

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

或使用 Javascript（我在此示例中使用 jQuery）

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

【讨论】：