如何使整个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屋！