CSS如何实现自定义链接提示:
在默认状态下可以使用<a>标签的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
时间： 2024-10-01 19:12:51