伪类 :not() 应用场景

最新推荐文章于 2024-08-03 09:00:00 发布

原创最新推荐文章于 2024-08-03 09:00:00 发布 · 207 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

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

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

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