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

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-hover）。但是，正如 CSS 中明确指出的那样，您实际上是在 .opacity-0 上悬停。

我需要能够将鼠标悬停在 .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 以保持您的布局？

如果你愿意，我可以加一个小提琴。