扫码关注官方订阅号
走同样的路,发现不同的人生
根据parent元素ul定位的
//网页源代码,ul的类名为menu .menu { position: relative; width: 170px; padding: 5px 0; line-height: 35px; border-radius: 5px; background: -webkit-linear-gradient(top,#dbdbdb,#999); }
这段css固定位置:
.menu li:nth-child(1):hover ~ .ribbon_wrap{ top: 8px; } .menu li:nth-child(2):hover ~ .ribbon_wrap{ top: 43px; } .menu li:nth-child(3):hover ~ .ribbon_wrap{ top: 78px; } .menu li:nth-child(4):hover ~ .ribbon_wrap{ top: 113px; } .menu li:nth-child(5):hover ~ .ribbon_wrap{ top: 148px; }
这段CSS移动过去:
.ribbon_wrap { position: absolute; top: 8px; left: -20px; z-index: 1; transition: top 0.4s; }
这里的transition让css的top属性在修改时以0.4秒的时间平滑的过渡过去。
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
扫描下载App
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
根据parent元素ul定位的
这段css固定位置:
这段CSS移动过去:
这里的transition让css的top属性在修改时以0.4秒的时间平滑的过渡过去。