关于transition 在:hover状态下设置位置不同导致效果不同的问题

最新推荐文章于 2023-11-02 13:54:25 发布

语轻星子

最新推荐文章于 2023-11-02 13:54:25 发布

阅读量477

点赞数 1

CC 4.0 BY-SA版权

本文探讨了CSS中transition属性的不同应用方式及其对:hover状态动画的影响。具体对比了将过渡效果设置在基本样式与:hover伪类中所产生的行为差异。

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

	.showcase a{
    width: 270px;
    /* width: 150px; */
    height: 180px;
    background-color: #fff;
    margin: 20px;
    transition:all .3s;
}

– 此时会导致鼠标覆盖时在进入和退出时都会触发动画

.showcase a:hover{
    transform:translateY(-8px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    transition:all .3s;
}

– 此时只有鼠标进入元素时才会触发动画