老师transtion为什么不放在hover？
来源：3-11 静态页面第五屏以及后续
慕UI4313976
2021-01-20 15:44:58
.screen-buy__button{
height:80px;
width:240px;
text-align:center;
line-height:80px;
font-size:24px;
color:#fff;
background-color:#f01414;
display:inline-block;
border-radius:3px;
transition:all .5s;
}
.screen-buy__button:hover{
box-shadow:0px 0px 10px rgba(255, 255, 255, 0.5);
}
写回答
1回答
-
同学你好， 因为如果将transition放在hover下，只有鼠标移入时才会有过渡效果，鼠标离开元素就不会有过渡效果了，而直接放在.screen-buy__button选择器下，不管鼠标移入移出元素，都会对screen-buy__button元素发生改变的属性添加过渡，这样实现的效果会更好。
祝学习愉快~
1
相似问题