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

j2qf4p5b 于 2023-02-17 发布在其他

关注(0)|答案(2)|浏览(181)

我有以下内容：

<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在你悬停在它们上面的时候改变颜色--不管你悬停在off的文本上是在文本的右边还是左边。目前只有当我悬停在文本上的时候颜色才会改变。你知道怎么做吗？下面是我对css的摆弄：
http://jsfiddle.net/PTSkR/56/

css

来源：https://stackoverflow.com/questions/16630558/how-to-make-entire-div-change-color-on-hover-using-css

2条答案

按热度按时间

wgeznvg71#

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

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

这意味着只有.sidebar-link的悬停后代才受规则影响。删除空格。
http://jsfiddle.net/ExplosionPIlls/PTSkR/57/

赞(0）回复(0）举报 2023-02-17

nfg76nw02#

您可以通过以下代码轻松实现这一点：Link

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

赞(0）回复(0）举报 2023-02-17

我来回答

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

2条答案

相关问题

热门标签

最新问答