元素的隐藏和显示效果----利用定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <link rel="stylesheet" href="test1.css">
 7 </head>
 8 <body>
 9 <div class="imagemap">
10     <img src="1.jpg" alt="some of the team">
11     <ul>
12         <li class="rich"><a href="http://www.clagnut.com/">
13             <span class="outer">
14             <span class="inner">
15                 <span class="note">Richard Rutter</span>
16             </span>
17             </span>
18         </a></li>
19         <li><a href=""></a></li>
20         <li><a href=""></a></li>
21         <li><a href=""></a></li>
22         <li><a href=""></a></li>
23     </ul>
24 
25 </div>
26 </body>
27 </html>
 1 .imagemap{
 2     width:333px;
 3     height:500px;
 4     position:relative;
 5 }
 6 .imagemap img{
 7     width:333px;
 8     height:500px;
 9 }
10 .imagemap ul{
11     margin:0;
12     padding:0;
13     list-style: 0;
14 }
15 .imagemap a{
16     position:absolute;
17     display:block;
18     background: greenyellow;
19     color:#000;
20     text-decoration: none;
21     border:1px solid transparent;
22 }
23 .imagemap a .outer{
24     display:block;
25     border:1px solid transparent;
26 }
27 .imagemap a .inner{
28     display: block;
29     width:50px;
30     height:60px;
31     border: 1px solid transparent;
32 }
33 .imagemap .rich a{
34     top:50px;
35     left:80px;
36 }
37 .imagemap .rich .note{
38     position:absolute;
39     bottom:-1.7em;
40     width:7em;
41     padding:0.2em 0.5em;
42     background: #ffc;
43     text-align:-webkit-center;
44     left:-1000em;
45 
46 }
47 .imagemap a:hover .note,.imagemap a:focus .note{
48     left:0px;
49 }
50 .imagemap:hover .inner{
51     border-color: red;
52     margin:5px;
53 }
54 .imagemap:hover .outer{
55     border-color: red;
56 
57 }

设置导航栏的 下拉列表:可使用父元素相对定位,子元素绝对定位,一开始进行隐藏,悬停时,将定位位置更改让其出现。

posted @ 2018-08-30 12:44  阿兰儿  阅读(162)  评论(0编辑  收藏  举报