纯CSS实现图片切换效果

1. 鼠标点击实现图片切换效果

    

    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>1span>a>
   34         <a href="#b1" class="b"><p><img src="http://www.hellocookies.com/imgs/201004/img2.jpg" width="300" height="130" />p><span>2span>a>
   35         <a href="#c1" class="c"><p><img src="http://www.hellocookies.com/imgs/201004/img3.jpg" width="300" height="130" />p><span>3span>a>
   36         <a href="#d1" class="d"><p><img src="http://www.hellocookies.com/imgs/201004/img4.jpg" width="300" height="130" />p><span>4span>a>
   37     div>
   
   

    

   简单说下思路：通过点击链接跳到不同的锚记，每个li标签定义了对应的锚记。

2. 鼠标经过实现图片切换效果

    

    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>1span><a href="#b">2a><a href="#c">3a><a href="#d">4a>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">1a><span>2span><a href="#c">3a><a href="#d">4a>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">1a><a href="#b">2a><span>3span><a href="#d">4a>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">1a><a href="#b">2a><a href="#c">3a><span>4span>p>li>
   34         ul>
   35     div>
   
   

    

   思路：每个a标签都通过绝对定位，通过鼠标切换每个链接的z-index属性，实现覆盖其它a标签。

转载于:https://www.cnblogs.com/nicholaslai/archive/2010/04/18/3762637.html