Question

我有一个项目列表，在悬停时显示div中每个项目下面的几个选项。我想仅在用户将鼠标悬停在列表项上并且当它们离开时收回div占用的空间时才显示这些选项。因此，我在div上使用了display: none;，并在悬停时将其设置为display: block;。

这是here

的演示

这可以按预期工作，但转换过快，会产生一些刺耳的效果。有没有更好的方法淡入和淡出这个div（最好只用CSS）？或者我是否需要使用JavaScript？（到目前为止，我已经开发了没有jQuery的应用程序，并且不希望仅为此包含它。）

此外，列表项的高度也有所不同，因此使用从0到某个高度的不透明度转换不是一个可行的选项。

Answer 1

无法使用自动值转换显示属性和属性。这可以通过使用max-height属性来实现。

使用display: none代替use max-height: 0，display: block而不是max-height: <some value which you expect to be maximum>。请注意，请注意，转换速度取决于max-height的值。

例如，如果height的计算container1为200px且container2为400px，则为500px;将最大高度设置为0 {{1}}将为同一计时器功能的容器显示不同的转换速度。

Answer 2

希望这有帮助，工作code here

<强> HTML：

<div class="item">
    <a href="#">Item 1.....more text here</a>
    <div class="actions">
        <a href="#">Opt 1</a> <a href="#">Opt 2</a>
    </div>
</div>
<div class="item">
    <a href="#">Item 2</a>
    <div class="actions">
        <a href="#">Opt 1</a> <a href="#">Opt 2</a>
    </div>
</div>

<强> CSS：

.actions{display:none;}
.item{margin:30px;}

<强> jQuery的：

$(document).on({
    mouseenter: function () {
       $(this).children('.actions').stop().fadeIn('fast');
    },

    mouseleave: function () {
        $(this).children('.actions').stop().fadeOut('fast');
    }
}, '.item');

CSS FadeIn效果来自display：none to display：block

2 个答案: