Question

你将不得不看一下the Fiddle这个

我遇到问题的元素hoverHelper，无论身体的哪个部分悬停，只是在动画完成后才会显示next

当动画结束时，为了应用hoverHelper，浮动（将其从元素流中取出）透明叠加hover的宽度和高度可以覆盖整个页面。 event显示元素next。

我的问题，实质上是当浮动元素悬停时，它会记录悬停并按预期运行，但其他元素会受到负面影响。由于某种原因，浏览器使得所有后续元素都将其视为未浮动的元素，即使它永远不会丢失float:left。这意味着锚和其他后续元素被推下数千个像素，这是不可接受的

查看此行为的最简单方法是检查元素并强制:hover actualHover。然后你会看到它如何处理浮动的hoverHelper像一个未浮动的元素

以下是我的HTML和相关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，但这阻止了点击next按钮，这也是不可接受的

我意识到我所做的事情是非常规的，但对我来说，这是完全合理的。任何有关正在发生的事情的见解？

注意：

这个问题是通过替代解决方案解决的，而不是找到的问题。我们仍然不知道为什么浮动元素具有它所做的行为

Answer 1

与通过浮动从流中删除元素相反，使用position:absolute。

您说这会导致#next出现问题，但是如果您向其添加position:relative之类的内容，则可以点击它。 z-index仅对定位元素有效。

Working jsFiddle here - 在helperhover中添加了半透明背景来演示它。

令人难以置信的奇怪浮动行为

1 个答案: