CSS 如何使用css使整个div在悬停时改变颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16630558/
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
How to make entire div change color on hover using css?
提问by SB2055
I have the following:
我有以下几点：
<div id="side-menu" class="sidebar-nav span2">
<div class="sidebar-link"><span>Link 1</span></div>
<div class="sidebar-link"><span>Link 2</span></div>
</div>
I'm trying to make each of the two divs change color when you hover over them - whether you hover over the text of off to the right or left of the text. Currently the color changes only if I hover over the text. Any idea how this can be done? Here's my fiddle with css:
当您将鼠标悬停在两个 div 上时，我试图让它们中的每一个都改变颜色 - 无论您将鼠标悬停在文本右侧还是左侧的文本上。目前只有当我将鼠标悬停在文本上时颜色才会改变。知道如何做到这一点吗？这是我的 css 小提琴：
回答by Explosion Pills
You have a space in the hover selector. This matters because the space is the descendant selector in CSS
您在悬停选择器中有一个空格。这很重要，因为空格是 CSS 中的后代选择器
div.sidebar-link :hover{
background-color: #E3E3E3;
}
This means that only hovered descendants of .sidebar-linkare affected by the rules. Remove the space.
这意味着只有悬停的后代.sidebar-link受规则影响。删除空间。
回答by eozten
You can achieve this easily by this following code: Link
您可以通过以下代码轻松实现此目的：链接
.cstDiv{
padding:10px; /* text-align:center may be used for a good look */
width:55px;
}
div.cstDiv:hover{
background-color:gray;
color:white;
cursor:pointer; /* you may delete this if you want */
} <div>
<div class="cstDiv">Link I</div>
<div class="cstDiv">Link II</div>
<div class="cstDiv">Link III</div>
<div class="cstDiv">Link IV</div>
</div>