当您触摸该div的子元素时，div上的IE7悬停会丢失 [英] IE7 hover on div being lost when you touch a child element of that div

问题描述

理论上

我有一个div(容器)，将其悬停在其子div之一上时会出现(下拉).下拉菜单包含链接图像等，当我将其留在容器中时，下拉菜单便消失了.

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div> 

在这里jQuery

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

将CSS悬停在这里

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

实践

在除IE7以外的所有浏览器中，它都能正常工作，但是当我在下拉菜单中第一个包含div的跨度中突出显示时，由于某种原因，下拉菜单消失了，就像我已经离开了容器一样.

问题

我将头撞在墙上将近3个小时，试图找到所有ie7错误，我想知道它们是否相关，但可惜没有运气.我本来以为可能是"z-index"问题，但实际上并不能显示在下面的内容上方(我已经通过设置"position:relative; z-index:9999;"来尝试了此问题)在p和跨度上).除此之外，我完全陷入了困境.不过，我确实知道，该div以下的所有项目(例如，上例中的image标签)在围绕p的填充跨距进行绕边后确实会产生问题.

进一步说明: 我发现这是做跨度下面的元素，但是由于它们没有显示出来，所以我不知道如何解决.同样，下面的元素无关紧要，即使下面有一个div可以输入"(即您尚未加入)，那么您就失去了悬停并且下拉菜单消失了.

我知道我还没有安装CSS，但是任何人都可以想到发生这种情况的任何原因吗?另外，我已经禁用了所有直接在其上工作的CSS，它仍然会受到影响，但是这个问题.

解决方案

如评论中所述

在跨度上放置背景色将使悬停工作.由于某些原因，当您将鼠标悬停在IE中的透明背景上时，它会认为鼠标不再位于dom对象(或在本例中为span)中，而是位于其下方的元素中并调用mouse out事件. /p>

Microsoft认为这是一个错误，并链接到此博客条目那里 msdn 条目

In Theory

I have a div (container) that when hovered over one of its child divs appear (drop-down). Drop-down contains links images etc. and when I leave it and container then drop-down disappears.

<div id="container">
  <div>Hover over me to see extra stuff</div>
  <div id="drop-down">
     <div>
       <img />
     </div>
     <div>
       <a />
       <p><span>Info</span><span>More</span></p>
     </div>
     <img />
  </div>
</div> 

Heres the jQuery

$('#container').hover(
  function(){ $(this).find('#drop-down').addClass('hover'); },
  function(){ $(this).find('#drop-down').removeClass('hover'); }
);

Heres the CSS for hover

#container #drop-down {left: -9999px;}
#container .hover {left: 0;}

In Practice

In every browser other than IE7 it works perfectly but when I highlight over the spans in the first containing div in drop-down then drop-down dissappears for some reason as if I had left container.

The Question

I have been slamming my head against a wall for nearly 3 hours trying to find all the ie7 bugs I could to see if any were relevant but sadly with no luck. I originally thought it could be 'z-index' issue but as it is actually displaying above the content below this can't be the case (and I've tried it by setting 'position:relative; z-index:9999;' on both the p and the spans). Other than that I am completely stumped. I do however know that the any items below that div (e.g. the image tag in the example above) do create the issue after skirting round the spans on the padding of the p.

Further clarification: I've found it is to do the elements the lying underneath the spans but as they aren't showing through I have no idea how to fix it. Also, it doesn't matter what element is underneath just if there is a div underneath that you can "enter" (i.e. you are not already in it) then you lose the hover and drop-down disappears.

I know I haven't put up the CSS but can anyone think of any reason why this could be happening? Also, I have disabled all CSS working directly on it and it still is affected but this issue.

解决方案

As said in the comments

Putting a background color on the span will make the hover work. For some reason when you hover over a transparent background in IE, it considers the mouse to not be in the dom object (or in this case, the span) anymore, but instead in the element below it and calls the mouse out event.

Microsoft considers this a bug and links to this blog entry from there msdn entry

这篇关于当您触摸该div的子元素时，div上的IE7悬停会丢失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！