如何实现轮播CSS伪类鼠标移入显示左右切换按钮

如何实现轮播CSS伪类鼠标移入显示左右切换按钮

(作者:杨先金,撰写时间:2019年1月16日)

  1. 要实现这一效果,首先要分析清楚你要让鼠标移动到哪一个元素上触发伪类事件,这里是要让鼠标移入到container这个元素上显示左右切换按钮的这样一个效果,那么清晰的思路有了,你才能找到下手的切入点,才能更好地进行下一步操作。
    在这里插入图片描述
    图1
    其次,为了实现显示效果,一开始就要将class=“prve”以及class=“next”两个a标签隐藏起来,设置它们的display为none;在这里插入图片描述
    图2
    图3为原始效果图:
    在这里插入图片描述
    图3
  2. 在css样式中给a标签(即左右切换按钮)的外层容器“container”一个hover,让它的display为block,以达到显示效果;

在这里插入图片描述
图4
最终实现的效果如图5所示:鼠标移入,显示左右切换按钮。
在这里插入图片描述
图5
[link(https://mp.csdn.net).]

猜你喜欢

转载自blog.csdn.net/weixin_44541162/article/details/86517458