非淡泊无以明志,非宁静无以致远 -心静如止水,动于静

纯css实现div菜单跟随

当从网上找到这段代码的时候,在本地试验怎么也实现不了,只要错在了style的a:hover + div这一句。后来发现是因为没有 写上这一句:<!DOCTYPE HTML>。完整代码如下:

<!DOCTYPE HTML>

<html>
<head>
<script type="text/javascript" src="scripts/jquery-1.7.js"></script>
<style>
.box {
     display:none;
     position: fixed;
     top: 25px;
     left: 25px;
 
    padding: 5px;
    border: 1px solid black;
}

a:hover + div{
     display:block;  
}

div:hover{
       display:block;
}
</style>
</head>

<body>
<div id="floatbar">
    <a href="#"><div>Link</div></a>
    <div class="box">Popup box</div>
</div>

 </script>
</body>
</html>

posted @ 2013-04-14 21:07  烟雨客  阅读(557)  评论(0编辑  收藏  举报