带有 display 属性的 JavaScript 转换？

Question

我能否让某个元素在我将鼠标悬停在另一个元素上时淡入，并在我的鼠标不再位于该元素上时让它淡出？

我尝试在 CSS 中添加一个 transition，但这似乎不起作用(我已经预测到了，因为实际上是 JavaScript 使用 DOM 使 div 可见...) .

我得到了 here 的 fiddle

Answer 1

一开始想到soktinpk的方案。不透明度可以用 css 设置动画，所以这是最好的选择。

但是，即使不显示，它也会占用空间。为防止这种情况，您可以将其设为 position:absolute。但即便如此，它后面的元素也将无法点击。

这是一个结合@soktinpk 的想法的更强大的解决方案

为防止出现这种情况，请在它不可见时使用 display:none 将其隐藏。

编辑

实际上，visibility:hidden 似乎在淡入时效果更好。

HTML

<div id="button" onmouseover="showMenu()" onmouseout="hideMenu()">
    <!-- placing it inside will allow it to be positioned as wanted -->
    <div id="menu"></div>
</div>

CSS

#button {
    background-color: rgb(0,0,100);
    width: 100px;
    height: 50px;
    margin-top: 50px;
    margin-left: 50px;
    position:relative; // All absolutely positioned elements inside are relative to this element
}

#menu {
    background-color: rgb(0,100,0);
    width: 200px;
    height: 100px;
    opacity:0;
    visibility:hidden;
    transition: opacity 1s;
    -webkit-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -o-transition: opacity 1s;
    position:absolute; // So that it displays at the right position
    top:100%;
    left:0;
}

JS

var time_out;
var menu = document.getElementById("menu");

function showMenu() {
    clearTimeout(time_out);
    menu.style.visibility = "visible";
    menu.style.opacity = 1;
}

function hideMenu() {
    clearTimeout(time_out);
    menu.style.opacity = 0;
    // This will hide it when the animation is over
    time_out = setTimeout(function(){menu.style.visibility = "hidden";},1000);
}

JS Fiddle Demo