Html 悬停时突出显示 div 框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15624270/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Highlight div box on hover
提问by ShadyPotato
Say I have a div with the following attributes:
假设我有一个具有以下属性的 div：
.box {
width: 300px;
height: 67px;
margin-bottom: 15px;
}
How would I make it so that if someone hovers their mouse over this area, it changes the background to a slightly darker colour and makes it a clickable area?
我将如何做到这一点，如果有人将鼠标悬停在该区域上，它会将背景更改为稍暗的颜色并使其成为可点击区域？
回答by What have you tried
CSS Only:
仅 CSS：
.box:hover{
background: blue; /* make this whatever you want */
}
To make it a 'clickable' area, you're going to want to put a <a></a>tag inside the div, and you may want to use jQuery to set the hrefattribute.
要使其成为“可点击”区域，您需要<a></a>在 div 内放置一个标签，并且您可能需要使用 jQuery 来设置该href属性。
jQuery Solution
jQuery 解决方案
$('.box').hover(function(){
$(this).css("background", "blue");
$(this).find("a").attr("href", "www.google.com");
});
A third solution:You could change the cursor, and also give it a click event using jQuery:
第三种解决方案：您可以更改光标，并使用 jQuery 给它一个单击事件：
$('.box').click(function(){
// do stuff
});
Use the above along with the following CSS:
将上述内容与以下 CSS 一起使用：
.box{
background: blue;
cursor: pointer;
}
回答by kapantzak
.box:hover {
background: #999;
cursor: pointer;
}
When you hover the background changes to the color you want and cursor becomes pointer. You can trigger an event with jQuery like so:
当您悬停时，背景会更改为您想要的颜色，并且光标变为指针。你可以像这样用 jQuery 触发一个事件：
$('.box').click(customFunction);
回答by ariebear
Linking a div has worked for me simply by wrapping it in an atag. Here is an example below with Bootstrap classes:
链接一个 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>
To change your div colour on hover add:
要在悬停时更改 div 颜色，请添加：
div:hover {
background-color: rgba(255,255,255,0.5);
}
to your CSS :)
到你的 CSS :)
回答by Tomás Juárez
You can do it with CSS only:
您只能使用 CSS 来实现：
.box:hover{
background: blue;
cursor: pointer;
}
Or with Javascript (I'm using jQuery in this example)
或者使用 Javascript（我在这个例子中使用 jQuery）
;(function($){
$('.box').bind('hover', function(e) {
$(this).css('background', 'blue');
});
})(jQuery);
