Heim >Web-Frontend >CSS-Tutorial >Ein wenig kreatives CSS, um die Telefonnummer anzuzeigen, wenn die Maus platziert wird_Erlebnisaustausch
Ein wenig kreatives CSS, um die Telefonnummer anzuzeigen, wenn die Maus platziert wird_Erlebnisaustausch
- PHP中文网Original
- 2016-05-16 12:07:081474Durchsuche
1, Standard:
2, Maus nach oben bewegen:
Quelle: Gefunden im Telefonbuch des Mobiltelefons eines Kollegen Telefon heute, und stellte fest, dass die von ihm gespeicherten Telefonnummern alle Namen anzeigten, und bewegte sich dann einfach nach unten, um die entsprechende Nummer dieser Person anzuzeigen. Dann dachte ich mir: Das ist ziemlich gut. Dann dachte ich, dass ich ähnliche Effekte schon einmal gesammelt hatte. Ändere es ein wenig. Zusammenfassung: Entdeckungen gibt es überall im Leben, und gut darin zu sein, sie zu entdecken und dann fleißig zu denken und zu assoziieren, ist in der Tat von Vorteil
Quelle: Gefunden im Telefonbuch des Mobiltelefons eines Kollegen Telefon heute, und stellte fest, dass die von ihm gespeicherten Telefonnummern alle Namen anzeigten, und bewegte sich dann einfach nach unten, um die entsprechende Nummer dieser Person anzuzeigen. Dann dachte ich mir: Das ist ziemlich gut. Dann dachte ich, dass ich ähnliche Effekte schon einmal gesammelt hatte. Ändere es ein wenig. Zusammenfassung: Entdeckungen gibt es überall im Leben, und gut darin zu sein, sie zu entdecken und dann fleißig zu denken und zu assoziieren, ist in der Tat von Vorteil
。<!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>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：Einführung in das CSS-Webseitenlayout, Tutorial 12: Vertikales Navigationsmenü_Grundlegendes TutorialNächster Artikel：Einführung in das CSS-Webseitenlayout, Tutorial 12: Vertikales Navigationsmenü_Grundlegendes Tutorial