一直想问个关于漂浮层的问题
0
悬赏园豆：20
[已解决问题]
解决于 2012-01-30 15:21
网站上经常做到鼠标移动到一个按钮有下拉菜单，如上图，解决方案和 下面道路监控 之间有一定的距离，一般是在漂浮层中用padding-top，这时候会有个问题，中间没有其他元素就没事，如果用一张白图片，高度和padding的距离一样，当鼠标往菜单移动的时候，先经过白色图片的地方，下拉菜单会消失，用 Toolbar工具看 鼠标是先到白图片那个层上了。
但如果在漂浮层上加个背景颜色，就不会先移动到白图片上，菜单也不会消失，但是不是每个下拉都要背景的，问问有高手能解决这种问题么！
我写这种效果是用jquery 的 hover
$("按钮ID").hover(function(){
$("漂浮层ID").show();
},function(){
$("漂浮层ID").hide();
$("漂浮层ID").hover(function(){
$(this).show();
},function(){
$(this).hide();
})
})
问题补充：
重新举例 下面蓝框是一个div层，按钮和div层是紧挨着的,内部有padding-top：10px
图1，在按钮下面的漂浮层有红色背景，无论padding有多少鼠标移上去都不会消失
图2，漂浮层背景去掉了，这时候用工具查看页面元素时发现 鼠标是先移动到下面的div层，所以漂浮层也就消失了
图3 如下图
蓝框的div 和按钮之间有一定距离但中间没有其他html内容，这时候 漂浮层也不会消失，
想知道这里面的原因
最佳答案
0
那你为什么要在解决方案和下面道路监控之间加间隔呢?我觉得视觉上也不好看
收获园豆：20
我只是举个例子 有些要留一些空白 有些是一些图片 当然不影响 只是一直有这个问题不清楚想弄明白
@BiakeChou: 您的"漂浮层ID"范围，能否用 Border将它显示出来
@BiakeChou: 能不能把你的HTML 贴出来
@BiakeChou: 如果在漂浮层上加个背景颜色，就不会先移动到白图片上? 我表示怀疑
@BiakeChou: 如果，漂浮层ID和主菜单栏之间有空白，当然有影响
@ChatinCode:我重做了个示例在上面 代码如下
<div class="Menu">
<ul>
<li ID="BiakeCL1"><a href="">按钮</a>
<!--漂浮层 start-->
<div class="Mainabs">
<div class="Childabs">漂浮层</div>
</div>
<!--漂浮层 end-->
</li>
</ul>
</div>
<!--蓝色框div层-->
<div class="Test_Div"></div>
<!--蓝色框div层-->
<script type="text/javascript">
$(document).ready(function () {
$("#BiakeCL1").hover(function () {
$(".Childabs").show();
},function(){
$(".Childabs").hide();
});
});
</script>
@BiakeChou: 有必要用这么多 div 吗?
<li ID="BiakeCL1">下面直接写个<ul>...</ul>不好吗
@BiakeChou: 不管怎么样，都没有试出你出现的情况。很可能您的CSS写错。
@ChatinCode: 那你贴下你的代码看看呢~
<style type="text/css">
.Menu
{
height:37px;
}
.Menu ul
{
margin:0px;
padding:0px;
list-style-type:none;
}
.Menu li
{
float:left;
margin-left:10px;
display:inline;
}
.Menu li a
{
display:block;
border:1px solid #333333;
color:#333333;
font-family:"微软雅黑";
font-size:14px;
line-height:35px;
padding:0px 10px;
}
.Mainabs
{
position:absolute;
}
.Childabs
{
position:absolute;
display:none;
padding-top:10px;
width:50px;
}
.Test_Div
{
border:1px solid #0066FF;
width:100px;
line-height:50px;
text-align:center;
}
</style>
就是啊 一直很郁闷。。也许真是我的写法有问题
@BiakeChou: 你这段要干什么呀
<!--蓝色框div层-->
<div class="Test_Div"></div>
<!--蓝色框div层-->
@BiakeChou: 漂浮层会消失的呀，
@BiakeChou: 你写HTML的时候为什么不加上DTD
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <script src="jquery-1.7.1.js" type="text/javascript"></script>
5 <script type="text/javascript">
6 $(document).ready(function(){
7 $("#BiakeCL1").hover(function () {
8 $(".Childabs").show();
9 },function(){
10 $(".Childabs").hide();
11 });
12 }
13 );
14 </script>
15 <style type="text/css">
16 .Menu {
17 border-style:solid;
18 border-width: 1px;
19 border-color: red;
20 width: 600px;
21 }
22 ul {
23 margin: 0;
24 padding: 0;
25 height: 36px;
26 list-style-type:none;
27 }
28 #BiakeCL1 {
29 border-style:solid;
30 border-width: 1px;
31 border-color: green;
32 }
33 .Mainabs {
34 background-color:blue;
35 padding-top: 10px;
36 border-style:solid;
37 border-width: 1px;
38 border-color: blue;
39 }
40 .Childabs {
41 border-style:solid;
42 border-width: 1px;
43 border-color: gray;
44 }
45 .Test_Div {
46 margin-top: 50px;
47 width: 100px;
48 height: 100px;
49 border-style:solid;
50 border-width: 1px;
51 border-color: black;
52 }
53 </style>
54 </head>
55 <body>
56 <div class="Menu">
57 <ul>
58 <li ID="BiakeCL1"><a href="">按钮</a>
59 <!--漂浮层 start-->
60 <div class="Mainabs">
61 <div class="Childabs">漂浮层</div>
62 </div>
63 <!--漂浮层 end-->
64 </li>
65 </ul>
66 </div>
67 <!--蓝色框div层-->
68 <div class="Test_Div"></div>
69 <!--蓝色框div层-->
70 </body>
71 </html>
上面是我的测试代码
@BiakeChou:
@ChatinCode: 对哇 就想弄明白 消失原因。。
@BiakeChou: 那不是你写的Javascript让他消失的吗
@ChatinCode: 我的意思是 图1 不会消失 因为有背景 图2 会消失 用工具看是先到蓝框上 而不是在漂浮层上 就是这里我要问为什么？， 图3 也不会消失 因为漂浮层后面没html的其他标签 ，， 总感觉是有什么先后级别。。 图1当有背景的时候 鼠标在漂浮层上怎么也不会消失的 漂浮层比下面的篮筐级别要高， 图2漂浮层没背景时 蓝框要比漂浮层级别高，只要是鼠标划到漂浮层空白的地方就会消失。。。 图3 即使在空白地方也不会消失 感觉就是漂浮层比后面空白的级别高。。 不知道有木有明白~
@BiakeChou: 具体哪里，用id指明白
@BiakeChou: 用以下代码你应该看得
<script type="text/javascript">
$(document).ready(function(){
$("#logger").innerHTML = "hover out<br/>";
$("#BiakeCL1").hover(function () {
/* $(".Mainabs").show(); */
$(".Childabs").show();
$("#mylogger").append("#BiakeCL1hover in<br/>");
},function(){
/* $(".Mainabs").hide(); */
$(".Childabs").hide();
$("#mylogger").append("#BiakeCL1hover out<br/>");
});
}
);
</script>
<div id="mylogger"></div>
其他回答(2)
0
0
我只针对代码说。css自己写。jquery自己引用
<script type="text/javascript">
$(function () {
$("按钮ID").mouseenter(function () {
$("漂浮层ID").hover(function () {
$("漂浮层ID").show();
}, function () {
$("漂浮层ID").hide();
});
});
});
</script>