伪类 :not() 应用场景

贝塔贝卡贝

于 2021-05-15 20:34:30 发布

阅读量192

点赞数 4

CC 4.0 BY-SA版权

文章标签： css

本文链接：https://blog.youkuaiyun.com/Kiruthika/article/details/116862236

这篇博客介绍了如何使用HTML和CSS实现一种网页交互效果：当鼠标悬停在‘欢迎，程小程’上时，退出选项显示；鼠标离开时，退出选项隐藏。主要涉及CSS的`:hover`伪类和`display`属性的应用。

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

场景：
当鼠标悬停在欢迎，程小程上，退出显示，鼠标离开欢迎，程小程，退出隐藏
在这里插入图片描述

<ul class="login-container">
  <li>欢迎，程小程</li>
  <li>退出</li>
</ul>

.login-container{
    float: right;
    li:not(:first-child){
        display: none;
    }
    &:hover{
        li:not(:first-child){
            display: block;
            background-color: #e6e6e6;
            text-align: center;
            padding: 6px 10px;
            margin-top: 4px;
        }  
    }
}