如何使用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 的 fiddle：http://jsfiddle.net/PTSkR/56/

- SB2055

---

你应该删除那些<span>标签，它们看起来非常冗余（至少在这个例子中是这样）。 - jammykam

Answer 1

你在悬停选择器中有一个空格。这很重要，因为在CSS中，空格是后代选择器。

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

这意味着只有鼠标悬停在 .sidebar-link 后代元素上时才会受到规则的影响。移除空格。

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

- Explosion Pills

---

在Firefox中，类名和:hover选择器之间的空格会导致CSS失效。去掉空格后，它就可以正常工作了。像这样： div.sidebar-link:hover{ - Zoran Pavlovic

Answer 2

你可以通过以下代码轻松实现这一点：链接

.cstDiv{
    padding:10px;
    width:55px;
}

div.cstDiv:hover{
    background-color:gray;    
    color:white;
    cursor:pointer;
}

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

- erenozten