a:hover应用精粹

原本想把题目叫做“纯CSS相册2”的，但在实现过程中试验了许多东西，干脆全部写出来分享了。大家知道，能兼容IE6的具有动态切换能力的CSS属性也只有hover伪类了，但hover伪类在IE仅对链接生效，并且一定要求显式实现href属性。尽管摆在我们眼前的道路是如此坎坷，但拥有position,float,display等调整位置控制显隐的属性在手，我们还是能实现一些非常有用的东西。而且CSS是如此友善，人们不会禁用CSS吧，这就是我们用纯CSS做东西的最大理由。

提示框效果

这东西英文名为tooltip，就是我们给页面添加title属性后，当鼠标移上去时出现的小框框，里面是title的值。这是一个很有用的东西，毕竟有时我们需要各浏览器的差异，如果设计师手艺精湛也肯定看不上默认的样式。总之，无论是出于统一的需要，美观的考量，还是炫耀的目的，这东西被开发出来了。我们一起追溯整个流程，当鼠标移到某页面元素上面，提示框就出现了，不管是从上面出现，还是下面出现，左边出现亦或右边出现，就是出现。说了这么多“出现”，大家应该有足够的时间联想现场吧。移到上面，我们应该能想到hover，上下左右，我们应该有位置的概念，但能控制上下的，也就绝对定位做到（浮动只能左右）。但绝对定位，一定要求存在一个包含块。包含块当然是要提示提示框的那个部分了，我们把它设置成position:relative就行了。由于要用到hover，包含块一定要用a标签。再看提示框，它必须位于包含块里面，以获得样式切换的能力。它应该使用什么标签呢？！不用说，是span。我们只要记住，DIV用于排版，SPAN负责装饰。它们都浏览器默认样式最少的元素。好了，我们来看结构层：

<p>其实内容<a class="tooltip" href="http://www.cnblogs.com/rubylouvre/archive/2009/09/18/1569660.html">纯CSS实现的提示框<span>by 司徒正美</span></a>其他内容……</p>

    1. .tooltip {  
    2.   color:#000;/*取消浏览器对a的默认样式*/  
    3.   text-decoration:none;/*取消浏览器对a的默认样式*/  
    4.   font-weight:700;/*用于突出重点*/  
    5. }  
    6.   
    7. .tooltip  span{  
    8.   display:none;/*平时隐藏要放到提示框的内容*/  
    9. }  
    10. .tooltip:hover span{  
    11.   display:block;/*一旦鼠标放到上面它就出现了*/  
    12.   position:absolute;/*绝对定位，用于精确控制出现方位*/  
    13.   white-space:nowrap;/*不允许提示框里的内容换行*/  
    14.   top:1.5em;  
    15.   left:2em;  
    16.   background:#a9ea00;/*背景色*/  
    17.   border:1px solid #10F11A;  
    18.   color:#fff;  
    19.   font:500 .8em/1 "Microsoft YaHei", SimSun, "Courier New";  
    20.   padding:2px 1em;  
    21.   -moz-border-radius: 5px;/*圆角，IE与opera没有*/  
    22.   -khtml-border-radius: 5px;  
    23.   -webkit-border-radius: 5px;  
    24.   border-radius: 5px;  
    25.   cursor:text;  
    26.   z-index:999;  
    27. }  
    28. .tooltip:hover{  
    29.   position:relative;/*设置包含块*/  
    30. }  

放大镜效果

思路和上面的基本一样，只不过包含块与隐藏部分里面的东西换成图片，并且用width与height调整图片的大小。我们先实现一个简单的东西，结构层部分：

  1. <a class="zoom" href="http://www.cnblogs.com/rubylouvre/archive/2009/09/18/1569660.html">  
  2.   <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS放大镜效果" class="small" />  
  3.   <span>  
  4.     <img src="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/o_s001.jpg" alt="纯CSS放大镜效果" />  
  5.   </span>  
  6. </a>
    1. .zoom {  
    2.   color:#000;/*取消浏览器对a的默认样式*/  
    3.   text-decoration:none;/*取消浏览器对a的默认样式*/  
    4. }  
    5. .zoom img {  
    6.   border:none;/*默认存在边框，为了精确控制，我们一般应该清除它*/  
    7. }  
    8. .zoom .small {  
    9.   width:100px;/*缩小图片的宽*/  
    10.   height:75px;/*缩小图片的高*/  
    11. }  
    12. .zoom  span{  
    13.   display:none;/*平时隐藏“放大后”的图片*/  
    14. }  
    15. .zoom:hover span{  
    16.   display:block;/*一旦鼠标放到上面就“放大”图片*/  
    17.   position:absolute;/*绝对定位，用于精确控制出现方位*/  
    18.   top:-75px;/*此值应该为缩小图的高的负数*/  
    19.   left:0px;  
    20. }  
    21. .zoom:hover{  
    22.   position:relative;/*设置包含块*/  
    23. }  

转：http://blog.csdn.net/cheng5128/article/details/4613761

posted @ 2013-06-30 22:29  zzzp0755  阅读(364)  评论(0)  编辑  收藏  举报
今天的苦果，是昨天的伏笔，当下的付出，才是明日的花开！加油！！！加油！！！