zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    ajax处理返回的json数据
    （转）JavaScript Trim() IE 不支持 问题解决 .
    ajax乱码,asp,php,jsp
    常用工具软件
    给DIV添加滚动条
    java递归菜单树转换成json字符串
    将请求的数据以json（plain）输出有乱码
    json穿
    乱码问题
    getRequestURI,getRequestURL的区别
  • 原文地址：https://www.cnblogs.com/renzhituteng/p/3164011.html
Copyright © 2011-2022 走看看