Un peu de CSS créatif pour afficher le numéro de téléphone lorsque la souris est placée

Un peu de CSS créatif pour afficher le numéro de téléphone lorsque la souris est placée_Experience Exchange

PHP中文网

Libérer： 2016-05-16 12:07:08

original

1472 Les gens l'ont consulté

1, par défaut :

2, déplacez la souris vers le haut :
Un peu de CSS créatif pour afficher le numéro de téléphone lorsque la souris est placée_Experience Exchange

Source : Trouvé dans le répertoire téléphonique du mobile d'un collègue téléphone aujourd'hui, et a constaté que les numéros de téléphone, il a enregistré tous les noms affichés, puis descendez simplement pour afficher le numéro correspondant de cette personne. Puis je me suis dit : c'est plutôt bien. Ensuite, j'ai pensé que j'avais déjà collecté des effets similaires. Changez-le un peu. Résumé : La découverte est partout dans la vie, et être doué pour la découvrir, puis être assidu dans la réflexion et l'association est en effet un avantage

。<!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>

Copier après la connexion