html美观的详情链接,css如何实现自定义更为美观的链接提示效果

建议:尽可能的手写代码，可以有效的提高学习效率和深度。

在默认状态下可以使用标签的title属性实现链接提示效果。例如

复制代码代码如下:

View Code

蚂蚁部落

蚂蚁部落

虽然上面的代码能够实现链接提示效果，但是往往并不能够满足实际需求，可能需要自定义更为美观或者与页面相搭配的链接提示效果。代码实例如下

复制代码代码如下:

View Code

蚂蚁部落

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;

}

• DIV+CSSDIV+CSS

• jQueryjQuery

• JSJS

• HTMLHTML

以上代码顺利实现了我们想要的效果。最主要的方法就是利用超链接伪类实现span元素的显示