求助：怎样用纯css实现图片切换效果？

mengxiaoya66 2012-04-16 02:32:40

想做一个产品展示，上面类似导航，点上面的导航，下面的产品可自动切换，只能用css，哪位能指点一下？

...全文

547 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

snowwolf1015 2012-04-16

打赏
举报

楼上是了楼主刚写的代码，现在只有鼠标点击图片才能变换，哪位高能帮忙改一下，实现鼠标滑过图片变换？

mengxiaoya66 2012-04-16

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style>
img{ border:0px}
.top{ width:950px; float:left; margin:0px; padding:0px}
.bottom{ width:950px; float:left; margin:0px; height:479px;overflow:hidden;}
.top ul{ width:950px; height:40px; margin:0px; padding:0px}
.top ul li{ list-style:none; float:left; margin:0px; padding:0px}
span{display:none;}
a span{ display:block; width:950px;height:479px;
background-repeat:no-repeat;
}
#a1:hover span{
background-image:url("http://c.csdn.net/bbs/t/5/i/pic_logo.gif");
}
#a2:hover span{
background-image:url("http://img13.360buyimg.com/n3/8794/569c4f64-d790-44a1-88fc-5c30323cd82e.jpg");
}
</style>
<body>
<div style="width:950px">
<div><img src="images/aaaaa_01.jpg" width="951" height="49" /></div>
<div class="top">
<ul>
<li><a href="#a1" title=""><img src="images/aaaaa_03.jpg" width="153" height="47" /></a></li>
<li><a href="#a2" title=""><img src="images/aaaaa_04.jpg" width="126" height="48" /></a></li>
<li><a href="#a3"><img src="images/aaaaa_05.jpg" width="132" height="48" /></a></li>
<li><a href="#a4"><img src="images/aaaaa_06.jpg" width="129" height="48" /></a></li>
<li><a href="#a5"><img src="images/aaaaa_07.jpg" width="140" height="47" /></a></li>
<li><a href="#a6"><img src="images/aaaaa_08.jpg" width="134" height="47" /></a></li>
<li><a href="#a7"><img src="images/aaaaa_09.jpg" width="134" height="47" /></a></li>
</ul>
</div>
<div class="bottom"><img src="images/1.jpg" width="954" height="479" alt="" id="a1"/><img src="images/2.jpg" width="954" height="479" alt="" id="a2"/><img src="images/3.jpg" width="954" height="479" alt="" id="a3"/><img src="images/4.jpg" width="954" height="479" alt="" id="a4"/></div>
</div></body>
</html>

mengxiaoya66 2012-04-16

打赏
举报

http://img04.taobaocdn.com/imgextra/i4/723053579/T2k6hBXjNNXXXXXXXX_!!723053579.jpg
鼠标滑过上面的导航，下面是产品区，产品区实现图片切换

mengxiaoya66 2012-04-16

打赏
举报

<a id="a1">产品一
<span></span>
</a>
<a id="a2">产品二
<span ></span>
怎样让“产品一”“产品二”在一排？

小真子 2012-04-16

打赏
举报

楼上是最简单的一种方法，用CSS及鼠标事件来展示的显示与隐藏的效果

wzhiyuan 2012-04-16

打赏
举报

一个极简的例子



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

 

<style type="text/css" >

span{display:none;}

a span{ display:block; width:200px;height:100px;

 background-repeat:no-repeat;

}

#a1:hover span{

   background-image:url("http://c.csdn.net/bbs/t/5/i/pic_logo.gif");

}

#a2:hover span{

   background-image:url("http://img13.360buyimg.com/n3/8794/569c4f64-d790-44a1-88fc-5c30323cd82e.jpg");

}

</style>

</head>



<body>

 

  <a id="a1">产品一

<span></span>  

  </a>

   <a id="a2">产品二

<span ></span>  

  </a>

 </body>

</html>