css模拟title和alt的提示效果

这段时间写了很多页面代码,除了一些知识重复以外,也学到css的一些新东西,或许是旧东西,但是还是希望能对大家有用。

  其实在css里面有很多对a的样式应用,因为a标签是仅有的默认可以触发动作的标签,因此在很多时候可以用css来控制a达到js才能达到的效果,比如今天要介绍的css仿title和alt的提示效果:

  先来分析一下这种效果的特点,无非就是在鼠标悬停的时候出现一个包含介绍文字的提示层,如果用传统的javascript来实现,就要设置对象的onmouseover和onmouseout属性,而如果把对象看作是a属性中的link和hover的话,这个问题就更清晰了,因为只要把对象的link属性设置为隐藏提示层、hover属性设置为呈现提示层即可,那么这个提示层的位置究竟在哪里呢?当然是在a标签中间了,目前常用的办法是把提示内容放在span标签中间进而包含在a标签内部,然后设置a:link和a:hover下不同的span样式即可。

  下面结合代码给大家说一下这个简单的原理:

  <style>
  .info {position:relative;background:#fff;color:#666; text-decoration:none;font-  size:12px;width:150px;text-align:center;border:1px solid #ccc;height:25px;line-  height:25px;}/*设置链接的属性,一定要设置为relative才能使提示层跟着链接走*/
  .info:hover {background:#eee;color:#333;}
  .info span {display: none }/*设置正常下的span为隐藏状态*/
  .info:hover span /*设置hover下的span属性为呈现状态,并设置提示层的位置*/  {display:block;position:absolute;top:30px;left:60px;width:130px;
  border:1px solid #ff0000; background:#fff; color:#000;padding:5px;text-align:left;}
  </style>
  <body>
  <a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东</span></a>
  <a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</span></a>
  <a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</span></a>
  <a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</span></a>
  <a class="info" href="http://www.achome.cn">www.achome.cn<span>这是我的个人blog,里面有一些网站设计和制作的东东,希望大家常来交流</span></a>
  </body>

转载请注明出处:https://www.onexin.net/css-tips-simulation-title-and-alt-results/

随机文章:

1、WEB开发者需要了解的IE7的新功能
https://www.onexin.net/web%e5%bc%80%e5%8f%91%e8%80%85%e9%9c%80%e8%a6%81%e4%ba%86%e8%a7%a3%e7%9a%84ie7%e7%9a%84%e6%96%b0%e5%8a%9f%e8%83%bd/

2、只需花一块钱买一个月阿里云主机
https://www.onexin.net/just-spend-a-money-to-buy-a-month-ali-cloud-host/

3、Magento多语言设置——优化前台与后台实现方法
https://www.onexin.net/magento-multi-language-set-methods-and-front-switch-mode/

4、Ubuntu下安装使用 tesseract-ocr
https://www.onexin.net/ubuntu-install-using-tesseract-ocr/

5、Discuz! X3.4网站安全配置指引
https://www.onexin.net/discuz-x3-4-safe-guide/

Leave a Reply