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

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

PHP中文网original: 2016-05-16 12:07:081474parcourir

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>

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Tutoriel d'introduction à la mise en page Web CSS 12 : Menu de navigation verticale_Tutoriel de baseArticle suivant：Tutoriel d'introduction à la mise en page Web CSS 12 : Menu de navigation verticale_Tutoriel de base

Articles Liés

Voir plus