CSS 悬停的用法

最新推荐文章于 2022-07-05 09:41:19 发布

原创最新推荐文章于 2022-07-05 09:41:19 发布 · 645 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

css 专栏收录该内容

14 篇文章

订阅专栏

本文详细解析了如何使用CSS对左菜单栏中的a链接及其它元素应用悬停效果，通过不同选择器组合实现精确控制，包括对li元素、a链接以及li内所有a链接的悬停样式修改。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

例：设置一个左菜单栏，通过对菜单栏里的a链接及其余元素悬停，看其变化状况
以下为HTML标记：

<div class="centerblock">
    <div class="centerblock_left">
        <ul class="leftmenu">
            <li>
                <a href="#">女装</a>/<a href="#">男装</a>/<a href="#">内衣</a><span>></span>
            </li>
        </ul>
    </div>
    <div class="centerblock_right"></div>
</div>

在css样式中的总定义：

.centerblock{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 1000px;
    height: 500px;
    border: 1px solid silver;
}
.centerblock_left{
    width: 200px;
    height: 500px;
    border-right:1px solid orange ;
    float: left;
}
.centerblock_right{
    width: 799px;
    height: 500px;
    float: left;
}
.leftmenu>li>span{
    float: right;
    font-size: 12px;
    margin-right: 10px;
}
.leftmenu>li{
    list-style: none;
    height: 31.3px;
    font-size: 15px;
    line-height: 31.3px;
    color: #5e5e5e;  /*字体颜色为灰*/
    padding-left: 20px;
}        /*左菜单栏里的所有内容*/
.leftmenu>li>a{
    text-decoration: none;
    color:#5e5e5e;   /*字体颜色为灰*/
}     /*li里的所有a的变化*/

1.对左菜单栏里的li悬停

.leftmenu>li:hover{
     background-color: #ffd6c1;  /*背景颜色为粉*/
     color: #ffaa2d;     /*字体颜色为橙*/
 }     /*悬停li时，除a链接以外的内容会变化*/

在这里插入图片描述
如图：对li悬停时，li中a链接的颜色仍为灰色，而“/”颜色由灰变为橙色。说明a链接虽然在li里，但li不能控制a链接里的属性，需另外设置。

2.对li里的单独a链接悬停

.leftmenu>li>a:hover{
    text-decoration: underline;     
}    /*悬停a时，每一个a的变化*/

在这里插入图片描述
如图：对li里的a链接进行悬停时，加入了下划线，其余元素不发生改变。

3.对li里的所有a链接悬停

.leftmenu>li:hover>a{
    color: #ffaa2d;       /*字体颜色为橙*/
}   /*悬停li时所有a均变化*/

在这里插入图片描述
如图：设置字体颜色为橙，发现li里所有元素，包括所有a链接的字体全部变为橙色。