将鼠标悬停在整个 div 上时,在 IE 中悬停不起作用
我正在使用 jquery addClass 代码在滚动 div 时显示/隐藏元素。在所有浏览器中它都有效,但在 IE 中它仅在我滚动某些文本而不是完整的 div 时才有效。
所以在这个例子中,如果我滚动主 div 的显示文本部分,隐藏文本 div 将显示。但是如果我将鼠标移入两个浮动 div 之间的空间(其中现在有文本或任何内容),则悬停不起作用。
更新:下面的代码似乎可以工作,但我的生产代码却不能。请参考此链接: jsfiddle.net/H2anm/5 有一些损坏的图像等,但是如果将鼠标悬停在元素上,进入用户名、位置坐标和 Pref.brand: Gamehouse.. 或共享/书签链接周围的一些空白区域右侧的空白区域,则 div 会折叠,按钮/ bgcolor改变消失。
javascript:
$(function() {
$("div.DivThatsTriggeredOnRollover").hover(
function() { $("div.hiddentext").addClass("hiddentextShow"); },
function() { $("div.hiddentext").removeClass("hiddentextShow"); });
});
伪html代码:
<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>
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>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
实际上,一切都按预期工作(在 IE6-7-8 中测试):
http://jsfiddle.net/ZDyyU/< /a>
如果您将鼠标悬停在
.DivThatsTriggeredOnRollover
内的任何内容上,.hiddentext
将在您将鼠标移开时显示和隐藏。.showingtext
与此无关,它就在那里。Actually, everything works as expected (tested in IE6-7-8):
http://jsfiddle.net/ZDyyU/
If you mouse over anything inside the
.DivThatsTriggeredOnRollover
, the.hiddentext
will show and hide when you mouse out..showingtext
plays no part in this whatsoever, it's just there.事实证明,在 IE7 中,如果您在较大的 div 内有多个浮动,并且在其中一个内部浮动 div 中指定了宽度,则 还必须指定最外面的宽度。我不确定为什么会出现这种情况,但它已在我的代码版本中修复: http:// /jsfiddle.net/H2anm/8/
我需要为整个外部 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.
你的代码看起来很完美。不知道出了什么问题
http://jsbin.com/udaqi4
your code seemed to be perfect. don't know what is going wrong
http://jsbin.com/udaqi4