纯CSS实现图片切换效果
-
鼠标点击实现图片切换效果
9 <style type="text/css"> 10 * { margin:0; padding:0;} 11 body { background-color:#fff; color:#333; font:12px/1.5 Tahoma, Verdana, Sans-serif; word-wrap:break-word;} 12 li { list-style:none;} 13 img { border:0;} 14 a:link,a:visited,a:hover,a:active { color:#d94b01; text-decoration:none;} 15 h1 { line-height:100px; text-align:center;} 16 /* 鼠标滑过 */ 17 .main { position:relative; width:306px; height:161px; margin:0 auto; overflow:hidden;} 18 .main p { border:3px solid #f47500;} 19 .main a { position:absolute; display:block; width:306px; height:136px;} 20 .main a:hover,.main a:active { *zoom:1; z-index:2!important;} 21 .main a:hover span,.main a:active span { background-color:#4e8ac5; color:#fff; font-weight:700;} 22 .main a span { position:absolute; top:136px; height:20px; padding:0 7px; border-width:0 2px 2px 2px; border-style:solid; border-color:#f47500; background-color:#fef3da; cursor:pointer;} 23 .main .a span {left:165px;} 24 .main .b span {left:201px;} 25 .main .c span {left:236px;} 26 .main .d span {left:271px;} 27 28 </style> 31 <h1>纯CSS实现鼠标经过图片轮换效果</h1> 32 <div class="main"> 33 <a href="#a1" class="a"><p><img src="http://www.hellocookies.com/imgs/201004/img1.jpg" width="300" height="130" /></p><span>1</span></a> 34 <a href="#b1" class="b"><p><img src="http://www.hellocookies.com/imgs/201004/img2.jpg" width="300" height="130" /></p><span>2</span></a> 35 <a href="#c1" class="c"><p><img src="http://www.hellocookies.com/imgs/201004/img3.jpg" width="300" height="130" /></p><span>3</span></a> 36 <a href="#d1" class="d"><p><img src="http://www.hellocookies.com/imgs/201004/img4.jpg" width="300" height="130" /></p><span>4</span></a> 37 </div>
简单说下思路：通过点击链接跳到不同的锚记，每个li标签定义了对应的锚记。
-
鼠标经过实现图片切换效果
9 <style type="text/css"> 10 * { margin:0; padding:0;} 11 body { background-color:#fff; color:#333; font:12px/1.5 Tahoma, Verdana, Sans-serif; word-wrap:break-word;} 12 li { list-style:none;} 13 img { border:0;} 14 a:link,a:visited,a:hover,a:active { color:#d94b01; text-decoration:none;} 15 h1 { line-height:100px; text-align:center;} 16 /* 鼠标点击 */ 17 .content { width:306px; height:161px; margin:0 auto;} 18 .content ul { width:100%; height:161px; overflow:hidden;} 19 .content li { width:306px; height:161px;} 20 .content li img { display:block; border:3px solid #f47500;} 21 .content p { height:25px; text-align:right;} 22 .content p a,.content p span { display:inline-block; height:20px; margin-right:10px; padding:0 7px; border-width:0 2px 2px 2px; border-style:solid; border-color:#f47500; background-color:#fef3da;} 23 .content p span { background-color:#4e8ac5; color:#fff; font-weight:700;} 24 </style> 27 <h1>纯CSS实现鼠标点击图片轮换效果</h1> 28 <div class="content"> 29 <ul> 30 <li name="a" id="a"><img src="http://www.hellocookies.com/imgs/201004/img1.jpg" width="300" height="130" /><p><span>1</span><a href="#b">2</a><a href="#c">3</a><a href="#d">4</a></p></li> 31 <li name="b" id="b"><img src="http://www.hellocookies.com/imgs/201004/img2.jpg" width="300" height="130" /><p><a href="#a">1</a><span>2</span><a href="#c">3</a><a href="#d">4</a></p></li> 32 <li name="c" id="c"><img src="http://www.hellocookies.com/imgs/201004/img3.jpg" width="300" height="130" /><p><a href="#a">1</a><a href="#b">2</a><span>3</span><a href="#d">4</a></p></li> 33 <li name="d" id="d"><img src="http://www.hellocookies.com/imgs/201004/img4.jpg" width="300" height="130" /><p><a href="#a">1</a><a href="#b">2</a><a href="#c">3</a><span>4</span></p></li> 34 </ul> 35 </div>
思路：每个a标签都通过绝对定位，通过鼠标切换每个链接的z-index属性，实现覆盖其它a标签。
