Rumah >hujung hadapan web >tutorial css >Sedikit css kreatif untuk memaparkan nombor telefon apabila tetikus diletakkan_Pertukaran pengalaman

Sedikit css kreatif untuk memaparkan nombor telefon apabila tetikus diletakkan_Pertukaran pengalaman

PHP中文网
PHP中文网asal
2016-05-16 12:07:081479semak imbas

1, lalai:

Sedikit css kreatif untuk memaparkan nombor telefon apabila tetikus diletakkan_Pertukaran pengalaman
2, gerakkan tetikus ke atas:
Sedikit css kreatif untuk memaparkan nombor telefon apabila tetikus diletakkan_Pertukaran pengalaman
Sumber: Menemuinya dalam buku telefon mudah alih rakan sekerja telefon hari ini , dan mendapati bahawa nombor telefon yang dia simpan semua memaparkan nama, dan kemudian hanya bergerak ke bawah untuk memaparkan nombor yang sepadan dengan orang ini. Kemudian saya berfikir sendiri, ini cukup bagus. Kemudian saya fikir saya telah mengumpul kesan yang sama sebelum ini. Tukar la sikit. Ringkasan: Penemuan ada di mana-mana dalam kehidupan, dan pandai menemuinya, dan kemudian rajin berfikir dan bergaul sememangnya satu kelebihan
。<!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>
Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn