Question

我有一个div在页面加载时隐藏（us display: none;）并且我希望它在鼠标悬停时淡入淡出。不幸的是，在设置css属性mouseenter时，不会发送display: none;事件。有解决方法吗？

div.overlay {
    display: block;
    visibility: hidden;
    width: 860px;
    height: 279px;

    background-color: rgb(0,0,0);

    position: absolute;
    margin-top: -279px;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

编辑：我正在谈论的页面在这里：http://alexzielenski.com/v2/ 当我将鼠标悬停在滑块上时，我试图淡入productDescription div

Answer 1

编辑：

<html>
    <head>
        <style>
            html {
                height: 100%;
                width: 100%;
            }
            div.overlay {
                visibility: hidden;
                display: block;
                width: 860px;
                height: 279px;

                background-color: rgb(0,0,0);

                position: relative;
                margin-top: -279px;

                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                border-radius: 5px;
            }
        </style>
    </head>
    <body>
        <div onmouseenter="alert('now animate the div inside');">
            <div class="overlay">
            </div>
        </div>
    </body>
</html>

以下内容无效，因为“visibility：hidden”或“display：none”都不会触发任何鼠标事件：

display: block; visibility: hidden

问题在于使用

display: none

不会将对象呈现给文档。

Answer 2

请改用visibility: hidden。如果您有display: none，则没有可以悬停的元素。

Answer 3

制作元素display:none时，页面上根本不会显示该元素。因此，鼠标无法悬停在它上面。最终，您只想将不透明度设置为0，然后为不透明度设置动画。但是，应该注意的是，这可能会影响页面的布局，因为现在元素将占用空间，而不是display:none。但是，如果元素绝对定位，那么你应该没问题。

与其他答案一样，使用visibility:hidden也可以。但它不会让你淡化元素。它只是出现或消失，没有动画。

Answer 4

你需要将淡出钩子放在元素本身上，这样当用户将鼠标悬停在它上面时它会淡出但是淡入事件需要在不同的元素上，例如父元素或兄弟元素，因为元素淡出后不再出现在页面中。

例如，当您悬停图像时，弹出窗口会消失，直到您将鼠标悬停在弹出窗口之外。

Answer 5

display:none;或visibility:hidden 的元素无法接收鼠标或键盘事件。你应该添加一个没有内容的叠加div。 background: transparent;具有与您想要淡入的div相同的位置和维度。在叠加div上绑定mouseenter事件并执行您想要的操作。

mouseenter while display：none设置

5 个答案: