专注优质Wordpress企业网站搭建与优化

一花一世界：活用CSS实现图文翻转效果



活用CSS实现图文翻转效果 - 西米CC

原文地址：CSS swap hover effect

翻译整理：西米CC

几个月前，我的一个电子商务客户要求在他的网站上实现商品的图片和描述响应鼠标经过切换的效果。在CSS里这个效果做起来并不是很难，在示例页面中大家可以看到大致的效果，基本都是纯XHTML和CSS实现的，只是在对IE6的兼容上需要额外做一点点工作。

>>> 浏览本教程效果示例页面

Markup – XHML代码

为了达到效果，每个产品的信息必须划分为两块，其一是默认显示的产品的图片，其二是产品的文本描述，它只有在鼠标经过的时候才会替代图片显示出来：

一花一世界：活用CSS实现图文翻转效果

  1. <a CLASS="show" HREF="..."  title="..."><img SRC="001.jpg" ALT="..." /></a>
  2. <div CLASS="hide">
  3. <a HREF="...">朝花夕拾 - DIV+CSS实战系列视频
  4. <p>本教程通过视频讲解如何一步步构建一张DIV+CSS网页...</p>
  5. </a>
  6. </div>

在代码中大家可以看到，产品图片被放置在一个应用了类样式show的容器中，而描述的文本则放置在类样式为hide的DIV容器中。当我们有多个不同产品时，只需将相同结构的多个代码段嵌套在无序列表中即可。

CSS代码

  1. #work {
  2. list-style:none;
  3. margin:0;
  4. padding:0;
  5. }
  6. #work li {
  7. float:left;
  8. display:block;
  9. width:235px;
  10. margin:10px;
  11. display:inline;
  12. padding:3px;
  13. background:#fff;
  14. border:1px solid #cad789;
  15. height:154px;
  16. }
  17. #work li a {
  18. border:none;
  19. }
  20. #work p   {
  21. margin-bottom:0;
  22. }

非常简单的样式表代码，我们把ID为work的无序列表中的list项目设置为左浮动，并设置其尺寸为255×154像素，定义margin实现间隔。现在我们来添加最关键的CSS代码，它们将在效果的实现上起到最重要的作用：

  1. #work li .show{
  2. display:block;
  3. width:235px;
  4. height:154px;
  5. }
  6. #work li .hide {
  7. color:#d4df9d;
  8. text-align: left;
  9. height: 0;
  10. overflow: hidden;
  11. background:#687b00;
  12. }

上面的代码有什么作用呢？height:0;和overflow: hidden;使得无序列表项中类样式为hide的容器默认不显示，可视的元素就只有类样式为show的图片容器。这两条规则主要是定义最终效果的默认状态，下面我们来看看当鼠标经过时，如何实现图文的切换：

  1. #work li:hover .hide{
  2. cursor: pointer;
  3. height: 133px;
  4. padding:10px;
  5. width:215px;
  6. }
  7. #work li:hover .show {
  8. height: 0;
  9. overflow: hidden;
  10. }

在这里我们利用伪类#work li:hover来设置当鼠标经过hide容器时，其中元素一些属性上的变化。这时候我们把原来应用在hide类样式上的height:0; 和overflow: hidden;转移到了show样式中，而hide容器的高度变化为153像素。现在效果差不多完成了，大家可以浏览示例页面。

IE6中的兼容性完善

我们的示例页面能在Firefox, Safari, IE7中正常的展示效果，但是在IE6下却不行，因为它只支持链接元素a的:hover伪类，也就是说#work li:hover的选择符在IE6中是无效的。那么这里我们就需要一些完善工作，首先下载一个简单的JS脚本，放置在网页所在目录下，然后就是在网页的HEAD区添加一段JS代码：

  1. <!-- add hover class to #work li if the mouse over -->
  2. <!--[if lte IE 7]>
  3. <script type="text/javascript" src="jquery-1.2.3.min.js"></script>
  4. <script type="text/javascript">$(function() {
  5. $(&#39;#work li&#39;).mouseover
  6. (function(){
  7. $(this).addClass(&#39;over&#39;);
  8. });
  9. $(&#39;#work li&&#39;).mouseout
  10. (function(){
  11. $(this).removeClass(&#39;over&#39;);
  12. });
  13. });
  14. </script>
  15. <![endif]-->
  16. ?>

上述的脚本中，我们为无序列表的每个列表项添加了一个名为over的类样式，代码首位的注释用于确保这段JS只在IE6或更老版本的IE中执行。实际上代码的作用就是让#work li.over .hide与#work li:hover .hide有着相同的效果，所以我们最终的CSS代码如下：

  1. #work li:hover .hide, #work li.over .hide{
  2. cursor: pointer;
  3. height: 133px;
  4. padding:10px;
  5. width:215px;
  6. }
  7. #work li:hover .show, #work li.over .show  {
  8. height: 0;
  9. overflow: hidden;
  10. }

[ 以下内容您也可能感兴趣 ]

Categories: DIV+CSS重构标准

Tags: ,

Subscribe to Comments

Add a Comment