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

最新推荐文章于 2024-06-11 11:55:45 发布

9栋108

最新推荐文章于 2024-06-11 11:55:45 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/alaner/p/9559499.html

版权

 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 }

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

转载于:https://www.cnblogs.com/alaner/p/9559499.html

9栋108

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
元素的隐藏和显示效果----利用定位

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <link rel="stylesheet" href="test1....
复制链接

扫一扫