Question

我正在尝试将过渡添加到项目列表中，将鼠标悬停在该列表上会通过更改max-height来使项目扩展。鼠标进入会立即发生扩展，但鼠标移出过渡会延迟。

jsfiddle https://jsfiddle.net/cawkie/u2eLh18f/2/

<html>
<head>
    <style>
        .inner {
            border: solid 1px #000000;
            width: 300px;
            max-height: 30px;
            overflow: hidden;
            transition: max-height 10s linear 0s;
        }

        .inner:hover {
            max-height: 10000px;
        }
    </style>
</head>
<body>
<div class="outer">
        <div class="inner">
            Lorem ipsum dolor ....
        </div>
        <div class="inner">
            Lorem ipsum dolor ...
        </div>

</div>
</body>
</html>

可能不相关，但是JS鼠标移出事件是即时的。

我想念什么吗？有解决方法吗？如果这是正常/预期的-为什么？

我可以使用JS / jQuery，但尝试不：-）

Answer 1

如果您不反对使用Bootstrap，他们有一个非常不错的accordion implementation，您可以使用实现这种效果而无需编写自己的Javascript。如果您确实想自己实现，则可以将其CDN链接添加到页面，然后使用Chrome DevTools在“源”选项卡中检查CSS。对其进行美化，然后按Ctrl + F搜索相关的类。

鼠标移出时的CSS过渡显示延迟

1 个答案: