分享一个CSS,可以实现很棒的提示效果
分享一个CSS,觉得还不错,希望有CSS兴趣和爱好的人喜欢,可以实现很棒的提示电动阀门效果,其他人可以飘过---呵呵
01
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
02
<html xmlns="http://www.w3.org/1999/xhtml">
03
<head>
04
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05
<title>测试电动阀门 - 麦子编程博客</title>
06
<style>
07
a {
08
color: #900;
09
text-decoration: none;
10
}
11
12
a:hover {
13
color: red;
14
position: relative;
15
}
16
17
a[title]:hover:after {
18
content: attr(title);
19
padding: 4px 8px;
20
color: #333;
21
position: absolute;
22
left: 0;
23
top: 100%;
24
white-space: nowrap;
25
z-index: 20px;
26
-moz-border-radius: 5px;
27
-webkit-border-radius: 5px;
28
border-radius: 5px;
29
-moz-box-shadow: 0px 0px 4px #222;
30
-webkit-box-shadow: 0px 0px 4px #222;
31
box-shadow: 0px 0px 4px #222;
32
background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
33
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
34
}
35
36
</style>
37
</head>
38
39
<body>
40
<a href="http://www.ykmaiz.com" title="一个不错的电动阀门编程技术博客">麦子编程博客</a>
41
</body>
42
</html>