Heim >Web-Frontend >HTML-Tutorial >CSS如何实现自定义链接提示_html/css_WEB-ITnose
CSS如何实现自定义链接提示_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:38:591037Durchsuche
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
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：各种设备的CSS3 MediaQuery整理及爽歪歪写法_html/css_WEB-ITnoseNächster Artikel：CSS3盒子阴影box-shadow_html/css_WEB-ITnose