创意CSS技巧:看图购

分类栏目:用户体验 - 前端开发

12077

发布于 5 条评论

10020163314b2ab67b

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

注:简单的说明下原理

  • 利用定位属性来排版,再利用hover伪类来显示背景图片之间的切换,ie6可能兼容不了,因为ie6不兼容hover的伪类,但是可以用csshover.htc等方法解决,请另行查找解决方法,本例不作深一步的解释
  • 背景图片上面加一个<ul>层,默认为隐藏,当鼠标经过背景图片的时候<ul>显示,即显示出外面的正方形框框
  • <ul>里面的<li><a>属性加上hover,当鼠标经过某个<li>里面的<a>区域时,显示出hover的背景图,即正方形框框里面的对焦图

查看预览下载附件

全部评论 / 5

  1. 这个可以用在淘宝上。实现的思路很不错。受启示了

    向往 2012-09-05
    4
  2. OMG,看着就会了

    少微 2012-09-05
    3
  3. 不错 怎么下载啊

    pite 2012-09-05
    2
  4. 这个的确效果不错,很实用,收藏了

    凉子 2012-09-05
    1