0

你将不得不看看这个小提琴

我遇到问题的元素 ,hoverHelper旨在显示next无论身体的哪个部分悬停但仅在动画完成后

当动画结束时，浮动（将其从元素流中取出）透明覆盖层hoverHelper被赋予了一个荒谬的高宽度和高度来覆盖整个页面，以便应用hover事件来显示元素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按钮被点击，这也是不可接受的

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

笔记：

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

4

1 回答 1

1

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

您说这导致了 的问题#next，但是如果您添加类似position:relative的内容，它将是可点击的。Az-index仅对定位元素有影响。

在这里工作 jsFiddle - 为 helperhover 添加了一个半透明的背景来演示它。

于 2013-10-18T20:48:25.637 回答