怎么做导航的那种效果？求教
日期：2014-05-17 浏览次数：20681 次
如何做导航的那种效果？！求教！
谁可以告诉我怎么做出这种效果啊？！
------解决方案--------------------
大体思想就是这样，细节你自己调吧，就是定位和现实隐藏问题。
------解决方案--------------------
display:none隐藏，想显示的时候，加个伪类:hover，然后display:block;就出来了，我觉得这是最简单的方法，但是位置要加对，定位也要准，不然不会出来的。
<style>
*{ margin:0px; padding:0px;}
.sBa{ width:180px; height:130px; border:1px solid #000; position:relative; margin:auto;background:#000;}
.sBa img{ border:0px;}
.sBa .title{ position:absolute; top:95px; left:0px; height:35px; width:100%; background:rgba(255,255,255,0.6); color:#FFF; font-size:14px; color:#999;}
.sBa .title div{ padding-left:10px; height:16px; line-height:19px;display:none;}
.sBa:hover .title{top:95px; height:35px;background:rgba(255,0,54,0.6); color:#fff;}
</style> </head> <body> <div class="sBa">
<a href="#">
<div class="title">
<div>add测试s</div>
</div>
</a>
</div> </body>
</html>
谁可以告诉我怎么做出这种效果啊？！
------解决方案--------------------
<div id="test">offset</div>
<div id="title">
Hello World.
</div>
$(function() {
$("#test").bind({"mouseenter": function(e) {
$("#title").css("left",e.pageX).css("top",e.pageY).show();
},
"mouseout": function(e) {
$("#title").hide();
}});
});
#title {
width:100px;
height:100px;
display:none;
position:absolute;
background-color:red;
}
#test {
position:absolute;
text-align:center;
left:20%;
top:20%;
right:50%;
bottom:50%;
background-color:gray;
border: 1px solid ;
}
大体思想就是这样，细节你自己调吧，就是定位和现实隐藏问题。
------解决方案--------------------
display:none隐藏，想显示的时候，加个伪类:hover，然后display:block;就出来了，我觉得这是最简单的方法，但是位置要加对，定位也要准，不然不会出来的。
<style>
*{ margin:0px; padding:0px;}
.sBa{ width:180px; height:130px; border:1px solid #000; position:relative; margin:auto;background:#000;}
.sBa img{ border:0px;}
.sBa .title{ position:absolute; top:95px; left:0px; height:35px; width:100%; background:rgba(255,255,255,0.6); color:#FFF; font-size:14px; color:#999;}
.sBa .title div{ padding-left:10px; height:16px; line-height:19px;display:none;}
.sBa:hover .title{top:95px; height:35px;background:rgba(255,0,54,0.6); color:#fff;}
</style> </head> <body> <div class="sBa">
<a href="#">
<div class="title">
<div>add测试s</div>
</div>
</a>
</div> </body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
