如何使整个div更改颜色悬停使用CSS? [英] How to make entire div change color on hover using css?
问题描述
我有以下:
<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>
我试图让每个div都改变颜色当你将鼠标悬停在它们 - 将鼠标悬停在文本右侧或左侧的文本上。目前,只有当我将鼠标悬停在文本上时,颜色才会更改。任何想法如何这样做?这是我的css的小提琴:
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:
http://jsfiddle.net/PTSkR/ 56 /
推荐答案
悬停选择器中有一个空格。这很重要,因为空格是CSS中的后代选择器
You have a space in the hover selector. This matters because the space is the descendant selector in CSS
div.sidebar-link :hover{
background-color: #E3E3E3;
}
这意味着只有 .sidebar-链接
受规则影响。删除空格。
This means that only hovered descendants of .sidebar-link
are affected by the rules. Remove the space.
http://jsfiddle.net/ExplosionPIlls/ PTSkR / 57 /
这篇关于如何使整个div更改颜色悬停使用CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!