Ein wenig kreatives CSS, um die Telefonnummer anzuzeigen, wenn die Maus platziert wird

Ein wenig kreatives CSS, um die Telefonnummer anzuzeigen, wenn die Maus platziert wird_Erlebnisaustausch

PHP中文网

Freigeben： 2016-05-16 12:07:08

Original

1442 Leute haben es durchsucht

1, Standard:

2, Maus nach oben bewegen:
Ein wenig kreatives CSS, um die Telefonnummer anzuzeigen, wenn die Maus platziert wird_Erlebnisaustausch

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&#39;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>

Nach dem Login kopieren