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

Question

我有以下内容：

    <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/

Answer 1

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

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

这意味着只有.sidebar-link的悬停后代会受到规则的影响。删除空格。

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

Answer 2

您可以通过以下代码轻松实现此目标：Link

＆＃13;

＆＃13;

.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 */
}

＆＃13;

   <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>

＆＃13;

＆＃13;

＆＃13;