html - 悬停时的过渡效果

标签 html css hover transition dropdown

我被简单的事情困住了,无法解决这个问题。当我将鼠标悬停在 html 中的 li 元素上时,我已经做到了,以便其他几个 li 下降(下拉菜单的形式)。

但是,我正在尝试找到一种方法让下拉菜单对下拉菜单有过渡效果,但我无法弄清楚...

链接是:

`https://jsfiddle.net/cphtd3ge/`

如果有人能帮助我,我将不胜感激。我还在学习,我想尽可能多地学习。

最佳答案

我已经更新了您的 jsfiddle,希望对您有所帮助。 https://jsfiddle.net/cphtd3ge/21/

您需要将 transition 添加到您想要设置动画的选择器上,而不是它的子级上。我还使用了 max-height 而不是 height 因为你不能在 CSS 中从 0px 过渡到 auto

关于html - 悬停时的过渡效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49709287/

相关文章:

html - 您如何开始将网页设计布局转换为 HTML 实现?

html - 如何仅使用一个固定链接悬停多个元素

javascript - 尝试让 div 在将鼠标悬停在图像上时出现......无法让它工作

php - 如何在while循环中获取记录

html - 响应式网格 - IONIC 2

javascript - 嵌套 li - 点击子项,触发父项点击事件

html - 如何在 div 元素内将图像居中 (HTML)

html - 仅旋转按钮而不是按钮单击时的文本

html - CSS 表格第一列背景

html - 如何对 .html 文件中链接的外部 .css 文件使用不耐烦模式?