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

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

PHP中文网

May 16, 2016 pm 12:07 PM

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 connexe

Tant de liens de couleursApr 13, 2025 am 11:36 AM

Il y a eu une série d'outils, d'articles et de ressources sur la couleur récemment. Veuillez me permettre de fermer quelques onglets en les rassemblant ici pour votre plaisir.

Comment fonctionnent les marges automnales dans FlexboxApr 13, 2025 am 11:35 AM

Robin a déjà couvert cela, mais j'ai entendu une certaine confusion au cours des dernières semaines et j'ai vu une autre personne prendre un coup de poing pour l'expliquer, et je voulais

Les soulignements arc-en-ciel en mouvementApr 13, 2025 am 11:27 AM

J'adore la conception du site Sandwich. Parmi les nombreuses caractéristiques belles figurent ces titres avec des soulignements arc-en-ciel qui se déplacent lorsque vous faites défiler. Ce n'est pas

Nouvel An, nouvel emploi? Laisse faire un curriculum vitae à propulsion de grille!Apr 13, 2025 am 11:26 AM

De nombreux conceptions de CV populaires tirent le meilleur parti de l'espace de page disponible en disant des sections en forme de grille. Utilisons la grille CSS pour créer une disposition qui

Une façon de sortir les utilisateurs de l'habitude de recharger tropApr 13, 2025 am 11:25 AM

Les recharges de page sont une chose. Parfois, nous actualisons une page lorsque nous pensons que cela ne répond pas, ou croyons que un nouveau contenu est disponible. Parfois, nous sommes juste en colère contre

Conception axée sur le domaine avec réactApr 13, 2025 am 11:22 AM

Il y a très peu de conseils sur la façon d'organiser des applications frontales dans le monde de la réaction. (Déplacez simplement les fichiers jusqu'à ce qu'il «se sent bien», LOL). La vérité

Détecter les utilisateurs inactifsApr 13, 2025 am 11:08 AM

La plupart du temps, vous ne vous souciez pas vraiment de savoir si un utilisateur est activement engagé ou temporairement inactif sur votre application. Inactif, signifiant, peut-être qu'ils

Wufoo ZapierApr 13, 2025 am 11:02 AM

Wufoo a toujours été génial avec les intégrations. Ils ont des intégrations avec des applications spécifiques, comme Campaign Monitor, MailChimp et Typekit, mais ils aussi

See all articles