怎么用纯css实现焦点图点击切换

html-css024

怎么用纯css实现焦点图点击切换,第1张

CSS 3 选择器加入了一个叫 :target 的伪类，它的作用是选中id与地址栏中#匹配的元素。如下：

html:

<a href="#tab1">tab1</a>

<a href="#tab2">tab2</a>

<div id="tab1">...</div>

<div id="tab2">...</div>

css:

div { display: none }

div:target { display: block }

当用户点击第一个链接的时候，地址栏会变成：http://.......#tab1，此时会显示id为tab1的div，点击第二个链接的时候，地址栏会变成：http://......#tab2，此时会显示id为tab2的div。

假设用来显示圆点div的class是point，图片区域的大小是10*10px的，然后那个图片的文件名是point_pic.gif。那么html的代码大致上可以写成下面这样

<div class="point"></div>

在css里面的定义可以是这样：

.point {width:10pxheight:10pxbackground:url(point_pic.gif) 0 0 no-repeat}

.point:hover {background:0 -10px}

这样就可以实现鼠标移上去以后改变背景图片的效果了，其实本质上就是先给div设置一个固定的大小，然后控制在鼠标滑过状态时，背景图片在div里面的位置