如何使用css在悬停时使整个div更改颜色？

我有以下内容：

<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的小提琴：

http://jsfiddle.net/PTSkR/56/

解决方法

悬停选择器中有空格.这很重要,因为空间是CSS中的后代选择器

div.sidebar-link :hover{
    background-color: #E3E3E3;
}

这意味着只有.sidebar-link的徘徊后代受到规则的影响.删除空间.

http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

原文地址：https://www.jb51.cc/css/215510.html