scss hover与active的写法

最新推荐文章于 2024-08-19 17:35:32 发布

鱼缸盖被子了

最新推荐文章于 2024-08-19 17:35:32 发布

阅读量1.3w

点赞数 4

本文链接：https://blog.csdn.net/yh8899abc/article/details/106614110

版权

本文深入探讨了CSS中特定样式技巧的使用，包括如何利用绝对定位和伪元素来创建美观的界面分割线，以及如何通过:hover和.active状态改变背景颜色和文字颜色，提升用户体验。

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

.talk-list {
	width: 100%;
	
    &::after {
        position: absolute;
        right: vw(30);
        bottom: 0;
        left: vw(30);
        height: vh(1);
        background-color: #dfdfe1;
        content: '';
    }

    &.active,
    &:hover {
        background-color: #f5f5f5;

        .talk-name {
            color: #2561fb;
        }

        /deep/ .talk-content {
            color: #2d2f33;
        }
    }
}