3

My situation is this: I have 2 partially overlapping divs that each have hover effects: Div 1 - Contains a bar chart, the bars in which have effects on hover. Div 2 - Is an area that spans the bottom 20% of the screen and when the user hovers over it (e.g. near the bottom of the screen) a control slides up from the bottom to allow them to change global properties to the table.

I want the browser to independently detect hover on either object, but what is happening is that whatever object is on top detects hover, but the other does not. I've found a bunch of almost related questions, but nothing that seems to answer this.

This is for a prototype, so hacky answers/answers that work only in one browser (preferably Chrome) are fine. Also solutions using CSS, jQuery, or JS are all OK.

Edit: added a fiddle that I think will illustrate my problem: http://jsfiddle.net/Gkgrx/

So if you hover to the bottom of the "table" (big red square that turns green on hover), when I hit the area that causes the table control to slide up (which it does) the table loses its hover state - I want it to still detect the hover.

Evidently I need to cut and paste the code here:

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();
});

Thanks

4

2 回答 2

5

考虑两个元素，其中第二个元素（绿色）相对位于第一个元素（黄色）的顶部。

<div id="yellow"></div>
<div id="green"></div>

这就是问题：问题

当您将鼠标悬停在黄色和绿色元素上时，效果很好。

但是，如果您在重叠区域上方，则只有绿色 div 会检测到它，因为绿色位于黄色之上。

解决方法是在绿色上做一个mousemove，并暂时隐藏它以便读取当前鼠标位置是否有任何元素，然后立即再次显示。如果下面有一些元素，则只需触发该元素的mouseover.

解决方案

现在，当您将鼠标悬停在重叠区域上时，会通知两个元素。

编辑

现在您发布了小提琴，我可以看到您的问题。您不能“强制”伪类hover发生在元素上。您可以在此处查看规格。

最简单的解决方法是添加另一个myhover类

.table:hover,
.table.myhover {
    background-color: green;
}

并在您进入或退出时显示或删除它。

$('.controlhover').hover(function () {
    $('.table').addClass('myhover');
}, function () {
    $('.table').removeClass('myhover');
});

http://jsfiddle.net/Gkgrx/1/

我想你明白了。当鼠标悬停在元素.table:hover上时自然使用。当鼠标悬停在与..table.table.myhover.table

很难理解你.controlhover在哪里，所以我添加了一个蓝色边框。提示：您无需bottom: 0px在 css.xml 中指定。0px 和 0em 一样，0 什么的，所以只要使用bottom:0等等top:0。

于 2013-07-23T19:11:08.720 回答
0

您必须通过 z-index 手动设置位于顶部的位置，或者更改页面结构，以免两个 Div 重叠 w/hover 操作。

在不知道您确切的页面结构的情况下..我会修改底部控制幻灯片的位置或确保它在可见时被定义为顶部..然后隐藏/折叠并将其移到后面。

祝你好运。

于 2013-07-23T18:38:55.187 回答