首页新闻找找看学习计划

一直想问个关于漂浮层的问题

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内容,这时候 漂浮层也不会消失,

想知道这里面的原因

BiakeChou的主页 BiakeChou | 菜鸟二级 | 园豆:204
提问于:2012-01-10 14:43
< >
分享
最佳答案
0

那你为什么要在解决方案和下面道路监控之间加间隔呢?我觉得视觉上也不好看

收获园豆:20
ChatinCode | 老鸟四级 |园豆:2272 | 2012-01-11 10:45

我只是举个例子 有些要留一些空白 有些是一些图片  当然不影响  只是一直有这个问题不清楚想弄明白

BiakeChou | 园豆:204 (菜鸟二级) | 2012-01-11 11:06

@BiakeChou: 您的"漂浮层ID"范围,能否用 Border将它显示出来

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-11 11:12

@BiakeChou: 能不能把你的HTML 贴出来

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-11 11:15

@BiakeChou: 如果在漂浮层上加个背景颜色,就不会先移动到白图片上? 我表示怀疑

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-11 11:17

@BiakeChou: 如果,漂浮层ID和主菜单栏之间有空白,当然有影响

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-11 11:36

@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 | 园豆:204 (菜鸟二级) | 2012-01-11 13:49

@BiakeChou: 有必要用这么多 div 吗?

 <li ID="BiakeCL1">下面直接写个<ul>...</ul>不好吗
ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-11 14:46

@BiakeChou: 不管怎么样,都没有试出你出现的情况。很可能您的CSS写错。

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-11 15:56

@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 | 园豆:204 (菜鸟二级) | 2012-01-12 08:05

@BiakeChou: 你这段要干什么呀

<!--蓝色框div层-->
<div class="Test_Div"></div>
<!--蓝色框div层-->
ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-12 13:29

@BiakeChou: 漂浮层会消失的呀,

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-12 13:32

@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">
ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-12 13:34
 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 | 园豆:2272 (老鸟四级) | 2012-01-12 13:38

@ChatinCode: 对哇 就想弄明白 消失原因。。

BiakeChou | 园豆:204 (菜鸟二级) | 2012-01-12 17:16

@BiakeChou: 那不是你写的Javascript让他消失的吗

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-13 08:21

@ChatinCode:  我的意思是 图1 不会消失 因为有背景 图2 会消失 用工具看是先到蓝框上 而不是在漂浮层上 就是这里我要问为什么?,  图3 也不会消失 因为漂浮层后面没html的其他标签 ,, 总感觉是有什么先后级别。。 图1当有背景的时候 鼠标在漂浮层上怎么也不会消失的 漂浮层比下面的篮筐级别要高, 图2漂浮层没背景时 蓝框要比漂浮层级别高,只要是鼠标划到漂浮层空白的地方就会消失。。。 图3 即使在空白地方也不会消失 感觉就是漂浮层比后面空白的级别高。。 不知道有木有明白~ 

 

BiakeChou | 园豆:204 (菜鸟二级) | 2012-01-15 21:23

@BiakeChou: 具体哪里,用id指明白

ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-16 14:24

@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>



ChatinCode | 园豆:2272 (老鸟四级) | 2012-01-16 15:24
其他回答(2)
0

这个好像就是冒泡问题,这里有篇文章专门介绍这个的

http://helion.name/archives/36.html

helion | 园豆:205 (菜鸟二级) | 2012-01-10 17:36
0

我只针对代码说。css自己写。jquery自己引用

    <script type="text/javascript">
$(function () {
$("按钮ID").mouseenter(function () {
$("漂浮层ID").hover(function () {
$("漂浮层ID").show();
}, function () {
$("漂浮层ID").hide();
});
});
});
</script>
宁小池 | 园豆:205 (菜鸟二级) | 2012-01-11 09:36
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册