令人难以置信的奇怪的浮动行为 [英] Incredibly strange floating behavior

查看:109
本文介绍了令人难以置信的奇怪的浮动行为的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您必须查看 小提琴 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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆