Home > Article > Web Front-end > A little creative css to display the phone number when the mouse is placed_Experience exchange
A little creative css to display the phone number when the mouse is placed_Experience exchange
- PHP中文网Original
- 2016-05-16 12:07:081434browse
1, default:
2, move the mouse up:
source: found it in the phone book of a colleague’s mobile phone today , and found that the phone numbers he saved all displayed names, and then just move down to display the corresponding number of this person. then i was thinking to myself, this is pretty good. then i thought that i had collected similar effects before. change it a little bit. summary: discovery is everywhere in life. it is indeed an advantage to be good at discovery and then diligent in thinking and association.
source: found it in the phone book of a colleague’s mobile phone today , and found that the phone numbers he saved all displayed names, and then just move down to display the corresponding number of this person. then i was thinking to myself, this is pretty good. then i thought that i had collected similar effects before. change it a little bit. summary: discovery is everywhere in life. it is indeed an advantage to be good at discovery and then diligent in thinking and association.
。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" /><title>comasp's blog</title>
<style type="text/css">
a{
color: #FFFF99;
text-decoration: none;
}a:hover{
color: #FFFFFF;
text-decoration: underline;
}
#nav{
padding: 10px 10px 0;
font-size: 12px;
font-weight: bold;
margin: 1em 0 0;
list-style:none;
}.bi{
position: relative;
z-index: 0;
}.bi:hover{
z-index: 99;
}.bi:hover span{
visibility: visible;
top: 0;
left: 0;
cursor: pointer;
}.bi span{
position: absolute;
left: -999em;
visibility: hidden;
}#nav li a,.bi:hover span{
line-height: 20px;
text-decoration: none;
background: #DDDDDD;
color: #666666;
display: block;
width: 80px;
text-align: center;
}#nav li a:hover,.bi:hover span{
color: #FFFFFF;
background: #DC4E1B;
}.bi:hover span{
padding-top: 2px;
}
</style>
</head>
<body>
<ul id="nav">
<li><a href="index.html">张三<span>13011111111</span></a></li>
<li><a href="about.html">李四<span>13022222222</span></a></li>
<li><a href="products.html">王五<span>13033333333</span></a></li>
<li><a href="services.html">赵六<span>13044444444</span></a></li>
<li><a href="contact.html">什么七去了<span>13055555555</span></a></li>
</ul>
</body>
</html>Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn