悬停在IE浏览器无法工作时，悬停在全格 [英] Hover in IE not working when hovering over full div

问题描述

我使用jQuery addClass代码在div上滚动时显示/隐藏元素。在所有的浏览器，它的工作原理，但在IE浏览器只适用于当我滚动一些文本，而不是整个div。

所以在这个例子中，如果我翻转主要div，hiddentext div将显示。但如果我将鼠标放到两个浮动div（现在有文本或其他东西）之间的空间中，悬停不起作用。

$ b

更新： jsfiddle.net/H2anm/5 有一些破碎的图像等，但如果将鼠标滑过元素到用户名右侧的空白处，位置坐标和Pref.brand：Gamehouse ..或共享/书签链接的某些周围空白区域，则div会折叠并且按钮/

javascript：

  $（function（） {
 $（div.DivThatsTriggeredOnRollover）。hover（
 function（）{$（div.hiddentext）。addClass（hiddentextShow）;}，
 function（）{ $（div.hiddentext）。removeClass（hiddentextShow）;}）; 
}）; 
  

伪html代码：

 < div class =DivThatsTriggeredOnRolloverstyle =width：500px;> 
 
< div id =showingtextstyle =float：left; width：100px;> 
显示文本
< / div> 
 
< div class =hiddentextstyle =float：right; width：100px;> 
这里是隐藏文字
< / div> 
 
< / div> 
  

解决方案

的一个更大的div和你指定一个内部浮动div的宽度，你必须指定一个最外层的宽度也是如此。即时通讯不知道为什么会出现这种情况，但它已在我的代码版本中修复： http：/ /jsfiddle.net/H2anm/8/

我需要为整个外部div指定宽度，因为我为灰色div指定了一个宽度。在此之前，如果我滚下红色/灰色悬停翻转无效。

I am using jquery addClass code to show/hide elements when rolling over a div. in all browsers it works but in IE it only works when i rollover some text, not the full div.

so in this example, if I rollover the showingtext section of the main div, the hiddentext div will show. but if I mouse into the space in between the two floating divs (where there is now text or anything), the hover doesnt work.

UPDATE: the code below seems to work, but my production code does not. Please refer to this link: jsfiddle.net/H2anm/5 There are some broken images and such, but if you roll your mouse over the element into the whitespace to the right of the usernames, the location coordinates and the Pref.brand: Gamehouse.. or some of the surrounding whitespace of the Share/Bookmark links, the div collapses and the buttons/bgcolor change disappear.

javascript:

$(function() {
$("div.DivThatsTriggeredOnRollover").hover( 
function() {  $("div.hiddentext").addClass("hiddentextShow"); },
function() { $("div.hiddentext").removeClass("hiddentextShow"); });
});

pseudo-html code:

<div class="DivThatsTriggeredOnRollover" style="width:500px;">

<div id="showingtext" style="float:left;width:100px;">
here is showing text
</div>

<div class="hiddentext" style="float:right;width:100px;">
here is hidden text
</div>

</div>

解决方案

turns out that in IE7 if you have multiple floats inside of a larger div and you specify a width in one of the inner floating divs, you have to specify a width in the outermost ones as well. im not sure why this is the case, but it has been fixed in the version of my code here: http://jsfiddle.net/H2anm/8/

I needed to specify a width for the entire outer div, since I had specified one for the gray div. prior to that, if I rolled off of the red/gray the hover flip didnt work.

这篇关于悬停在IE浏览器无法工作时，悬停在全格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！