纯CSS实现鼠标滑过显示选取框并可以点击的特效(看图购物)

2019-02-24  
[!--temp.google.in-article--]

前些日子,在淘宝看到一种叫看图购的效果,觉的非常不错,当时就想这种效果应该是js实现的。不料,在一次偶然的机会下,我接触到了这种效果,当时我震惊了,原来只用css就实现了,再一往下看,狂晕,那么简短!不由的引发深思,原来css可以用的这么灵活,看来自己的技巧能力是远远不够的,应该反省。好了,来看看效果吧,一如既往,一起提供附件下载:

注:简单的说明下原理

利用定位属性来排版,再利用hover伪类来显示背景图片之间的切换,ie6可能兼容不了,因为ie6不兼容hover的伪类,但是可以用csshover.htc等方法解决,请另行查找解决方法,本例不作深一步的解释

背景图片上面加一个层,默认为隐藏,当鼠标经过背景图片的时候显示,即显示出外面的正方形框框

给里面的属性加上hover,当鼠标经过某个里面的区域时,显示出hover的背景图,即正方形框框里面的对焦图

[!--temp.google.336*280--]
[!--temp.google-link-self--]
返回顶部
顶部