用css样式模拟title和alt的提示效果

时间：2021-04-16

其实在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;}
.info:hover {background:#eee;color:#333;}
.info span {display: none }
.info: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.xinqinsheji.com/">www.xinqinsheji.com<span>技术赢-网站技术学习园地</span></a>
<a class="info" href="http://www.xinqinsheji.com/">www.xinqinsheji.com<span>技术赢-网站技术学习园地</span></a>
<a class="info" href="http://www.xinqinsheji.com/">www.xinqinsheji.com<span>技术赢-网站技术学习园地</span></a>
<a class="info" href="http://www.xinqinsheji.com/">www.xinqinsheji.com<span>技术赢-网站技术学习园地</span></a>
<a class="info" href="http://www.xinqinsheji.com/">www.xinqinsheji.com<span>技术赢-网站技术学习园地</span></a>
<a class="info" href="http://www.xinqinsheji.com/">www.xinqinsheji.com<span>技术赢-网站技术学习园地</span></a>
</body>

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章