Question

我在opacity: 0;时将项目悬停在项目上时遇到了一些问题，但由于它们仍然存在于空间中（只是不可见），与display: none;不同，所有悬停事件都附加到那个对象仍然发生。

无法真正发布我正在使用的代码，但我已经设置了fiddle，并提供了更多解释来模拟它。就像一个注释，我宁愿不使用任何Javascript来解决它，尝试保持纯HTML / CSS。我还从下面的小提琴中发布了HTML和CSS：

HTML：

<div class="container">
    <div class="secondary-container">
        .opacity-0 fills this box.
        <div class="opacity-0"></div>
        <div class="on-hover">Hello, world!</div>
    </div>
</div>

CSS：

body {
    font-family: sans-serif;
}

.container {
    width: 200px;
    height: 200px;
    background-color: blue;
}

.container .secondary-container {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background-color: white;
    padding: 5px;
    box-sizing: border-box;
}

.container .secondary-container .opacity-0 {
    width: 100px;
    height: 100px;
    background-color: red;
    margin-top: -41px;
    margin-left: -5px;
    opacity: 0;
}

.on-hover {
    display: none;
    color: white;
}

.container .secondary-container .opacity-0:hover ~ .on-hover {
    display: block;
}

并解释：

将鼠标悬停在白色方块上，文字“Hello，world！”应显示（来自div.on-悬停）。但是，您实际上将鼠标悬停在.opacity-0上，如CSS中明确指出的那样。

我需要能够将鼠标悬停在.opacity-0上，当不透明度为0时（即对象不可见，但仍然存在于空间中），则不会触发悬停事件。当不透明度为1，并且您将鼠标悬停在.opacity-0上时，悬停事件将继续正常进行。最好不要使用Javascript。

希望一切都有意义，很高兴回答有关它的任何问题，因为我意识到我可能没有解释得这么好。

感谢您的帮助:)

Answer 1

尝试用opacity:0;替换visibility:hidden; http://jsfiddle.net/QwDwj/2/

Answer 2

我已经解决了:)首先，我需要说我忘了在OP中提到我需要使用CSS3过渡淡出框 - 抱歉。

仅使用visibility:hidden;做了一些奇怪的转换过程，所以我所做的就是同时使用可见性和不透明度。然后这会转变，但由于不透明度显然需要更多的偏好，因此可见性转换问题不再发生。谢谢您的帮助！

Answer 3

我不确定这是否有效。如果您悬停元素，将使用悬停样式。别忘了CSS不是一种编程语言。

为什么不为您使用JavaScript？我很确定jQuery有一个fadeOut方法，可以在淡入淡出显示结束时设置元素：无。

或者您只是使用display：none并将div放入具有固定高度/宽度的div中以保持您的布局？

如果你想要我，我可以添加一个小提琴。

仅当对象的不透明度为1时才触发悬停事件

3 个答案: