3

当 时，我在将鼠标悬停在项目上时遇到了一些问题opacity: 0;，但是因为它们仍然存在于空间中（只是不可见），与 不同display: none;，任何附加到该对象的悬停事件仍然会发生。

无法真正发布我正在使用的代码，但我已经设置了一个小提琴，并提供了更多解释来模拟它。就像一个注释，我宁愿不使用任何 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。

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

感谢您的任何帮助 ：）

4

3 回答 3

3

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

于 2013-02-14T16:05:18.433 回答
2

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

使用只是visibility:hidden;对过渡做了一些奇怪的事情，所以我所做的是同时使用可见性和不透明度。然后这两个转换，但可见性转换问题不再发生，因为不透明度显然更偏爱。谢谢您的帮助！

于 2013-02-14T16:10:18.867 回答
0

我不确定这是否可行。如果悬停元素，将使用悬停样式。不要忘记 CSS 不是一种编程语言。

为什么不使用 JavaScript 来满足您的需求？我很确定 jQuery 有一个 fadeOut 方法，可以将元素设置在淡入淡出显示的末尾：无。

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

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

于 2013-02-14T15:43:31.033 回答