我的情况是这样的:我有2个部分重叠的div,每个div都有悬停效果: Div 1 - 包含条形图,其中的条形图对悬停有影响。 Div 2 - 是一个横跨屏幕底部20%的区域,当用户将鼠标悬停在屏幕底部时(例如靠近屏幕底部),控件从底部向上滑动,以允许它们将全局属性更改为表格。
我希望浏览器能够独立检测任何一个对象上的悬停,但发生的事情是顶部的任何对象都检测到悬停,但另一个则没有。我发现了一堆几乎相关的问题,但似乎没有回答这个问题。
这是一个原型,所以只能在一个浏览器(最好是Chrome)中工作的hacky答案/答案都可以。使用CSS,jQuery或JS的解决方案也都可以。
编辑:添加了一个小提琴,我认为这将说明我的问题:http://jsfiddle.net/Gkgrx/
所以,如果你将鼠标悬停在"表格的底部" (在悬停时变成绿色的大红色方块),当我击中导致桌面控制向上滑动的区域(它确实)时,桌子会丢失其悬停状态 - 我希望它仍能检测到悬停。
显然我需要在此处剪切并粘贴代码:
CSS:
.controlhover {
position: absolute;
bottom: 0px;
left: 0px;
right: 0px;
height: 150px;
z-index: 1;
}
.tablecontrol {
position:absolute;
bottom: 0px;
left: 200px;
right: 200px;
background-color: #242D2F;
opacity: .9;
height: 70px;
color: #FFFFFF;
}
.table {
position: absolute;
top: 0px;
left: 50px;
right: 50px;
height: 500px;
background-color: red;
}
.table:hover {
background-color: green;
}
HTML:
<div class="table">This is a table that does stuff on hover</div>
<div class="controlhover"></div>
<div class="tablecontrol">This is the sliding control element</div>
JS:
$('.tablecontrol').slideUp();
$('.controlhover').hover(function(){
$('.tablecontrol').slideDown()
}, function() {
$('.tablecontrol').slideUp();
});
由于
答案 0 :(得分:5)
考虑两个元素,其中第二个元素(绿色)相对位于第一个元素(黄色)的顶部。
<div id="yellow"></div>
<div id="green"></div>
这就是问题所在:Problem
当您将鼠标悬停在黄色和绿色元素上时,效果很好。
但如果你在重叠区域上方,只有绿色div检测到它,因为绿色位于黄色顶部。
解决方案是在绿色上进行鼠标移动,暂时隐藏它以便读取当前鼠标位置是否有任何元素,然后立即再次显示。如果下面有一些元素,那么只需触发该元素的mouseover
。
现在,当您将鼠标悬停在重叠区域上时,会通知这两个元素。
修改强>
现在你发布了小提琴,我可以看到你的问题。你不能“强迫”伪类作为hover
发生在元素上。 You can check the specs here.
最简单的解决方法是将另一个类myhover
添加为
.table:hover,
.table.myhover {
background-color: green;
}
并在您分别进入或退出时显示或删除它。
$('.controlhover').hover(function () {
$('.table').addClass('myhover');
}, function () {
$('.table').removeClass('myhover');
});
我认为你明白了。当鼠标位于.table:hover
元素上时,.table
会自然使用。当鼠标位于与.table.myhover
重叠的元素上时,{人工}使用.table
。
很难理解你.controlhover
的位置,所以我添加了一个蓝色边框。
提示:您无需在CSS中指定bottom: 0px
。 0px与0em相同,0无论如何,所以只需使用bottom:0
和top:0
等等。
答案 1 :(得分:0)
您必须通过z-index手动设置哪个位于顶部或更改您的页面结构,以便您没有两个Div重叠w / hover操作。
在不知道您的确切页面结构的情况下..我会修改底部控制幻灯片的位置,或确保在可见时将其定义为顶部..然后隐藏/折叠并将其移动到后面。
祝你好运。