令人难以置信的奇怪的浮动行为 [英] Incredibly strange floating behavior
问题描述
您必须查看 小提琴 for this one
You're going to have to take a look at the Fiddle for this one
我遇到问题的元素 hoverHelper
用于显示 next
无论身体的什么部分被悬浮,但只是在动画完成后
The element I'm having trouble with, hoverHelper
, is purposed to show next
no matter what part of the body is hovered but only after the animation completes
当动画结束时,浮动取出元素流)透明覆盖 hoverHelper
被赋予一个荒谬的高宽度和高度以覆盖整个页面,以便应用 hover
事件显示下一个
。
When the animation ends, the floated (to take it out of the element flow) transparent overlay hoverHelper
is given an absurdly high width and height to cover the entire page in order to apply a hover
event to display the element next
.
我的问题,实质上,浮动元素被悬浮,它注册悬停并且作为它应该的,但是其他元素受到负面影响。由于某种原因,浏览器使所有下面的元素像一个未浮动的元素,即使它从不失去 float:left
。这意味着锚点和其他后续元素被推下几千个像素,这是不可接受的
My problem, in essence, is that when the floated element is hovered, it registers the hover and acts as it should, but the other elements are negatively affected. For some reason the browser makes all following elements treat it like an un-floated element even though it never loses float:left
. This means that the anchor and other succeeding elements are pushed thousands of pixels down, which is unacceptable
查看此行为的最简单方法是检查元素并强制:hover
在 actualHover
。然后你将看到它如何处理浮动的 hoverHelper
像一个未浮动的元素
The easiest way to see this behavior is to inspect the element and force :hover
on actualHover
. Then you will see how it treats the floated hoverHelper
like an un-floated element
以下是我的HTML和相关CSS
Following is my HTML and relevant CSS
<div id='hoverHelper'></div>
<div id='actualHover'></div>
<a href="#" id='next'>Next</a>
<div class='other'></div>
body { overflow:hidden; max-width:200px; max-height:200px;}
#hoverHelper {
width:0px;
height:0px;
z-index:1;
position:relative;
float:left;
margin-top:-1000px;
margin-left:-1000px;
animation: hhAnimation .001s 3s forwards;
}
#actualHover {
width:50px;
height:50px;
background:teal;
animation: yourAnimation 3s linear forwards;
}
#next {
z-index:2;
display: none;
}
#actualHover:hover ~ #next, #hoverHelper:hover ~ #next, #next:hover {
display:inline-block;
}
此外,我最初使用 position:absolute
,但这阻止了下一个
按钮被点击,这也是不可接受的。
Also, I originally was using position:absolute
on the overlay, but that prevented the next
button from being clicked which is also unacceptable
我明白我在做什么是非常规的,但对我来说这是完全有道理的。对于发生了什么?
I realize what I'm doing is unconventional, but to me this makes complete sense. Any insight as to what's going on?
注意:
通过替代解决方案解决,而不是找到的问题。我们仍然不知道为什么浮动元素有它的行为
This question was solved by way of an alternate solution, not of the problem being found. We still have no idea why the floated element has the behavior it does
推荐答案
与通过浮动删除流的元素,使用 position:absolute
。
As opposed to removing the element from the flow via floats, use position:absolute
.
你说这是导致 #next
,但是如果你添加 position:relative
到它,它将是可以点击的。 z-index
只对定位的元素有效。
You said this was causing issues with #next
, however if you add something like position:relative
to it, it will be clickable. A z-index
only has effect on positioned elements.
在此处工作jsFiddle - 添加了半透明的背景来展示它。
Working jsFiddle here - Added a semi-transparent background to the helperhover to demonstrate it.
这篇关于令人难以置信的奇怪的浮动行为的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!