CSS如何实现自定义链接提示_html/css_WEB-ITnose
- WBOY原创
- 2016-06-24 11:38:591013浏览
CSS如何实现自定义链接提示:
在默认状态下可以使用标签的title属性实现链接提示效果。例如:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title></head><body><a href="http://www.51texiao.cn" title="蚂蚁部落">蚂蚁部落</a></body></html>
虽然上面的代码能够实现链接提示效果，但是往往并不能够满足实际需求，可能需要自定义更为美观或者与页面相搭配的链接提示效果。
代码实例如下:
<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="http://www.51texiao.cn/" /><title>蚂蚁部落</title><style type="text/css">ul { list-style: none; font-size: 14px;}li { width: 100px; height: 30px; line-height: 30px; float: left; text-align: center; position: relative; border: 1px solid red;}span { display: none;}a:link, a:visited { text-decoration: none;}a:hover .tishi { display: block; width: 100px; height: 30px; background-color: #6C9; line-height: 30px; text-align: center; position: absolute; left: 80px; top: 40px; color: #FFFFFF;}</style></head><body><ul> <li> <a href="#" class="mylink">DIV+CSS<span class="tishi">DIV+CSS</span></a> </li> <li> <a href="#" class="mylink">jQuery<span class="tishi">jQuery</span></a> </li> <li> <a href="#" class="mylink">JS<span class="tishi">JS</span></a> </li> <li> <a href="#" class="mylink">HTML<span class="tishi">HTML</span></a> </li> <div style="clear:both"></div></ul></body></html> 以上代码顺利实现了我们想要的效果。最主要的方法就是利用超链接伪类实现span元素的显示。
原文地址是:http://www.51texiao.cn/div_cssjiaocheng/2015/0508/943.html
最为原始地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4689
声明：
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn