如何实现轮播CSS伪类鼠标移入显示左右切换按钮
(作者:杨先金,撰写时间:2019年1月16日)
- 要实现这一效果,首先要分析清楚你要让鼠标移动到哪一个元素上触发伪类事件,这里是要让鼠标移入到container这个元素上显示左右切换按钮的这样一个效果,那么清晰的思路有了,你才能找到下手的切入点,才能更好地进行下一步操作。
图1
其次,为了实现显示效果,一开始就要将class=“prve”以及class=“next”两个a标签隐藏起来,设置它们的display为none;
图2
图3为原始效果图:
图3 - 在css样式中给a标签(即左右切换按钮)的外层容器“container”一个hover,让它的display为block,以达到显示效果;
图4
最终实现的效果如图5所示:鼠标移入,显示左右切换按钮。
图5
[link(https://mp.csdn.net).]