css3 hover显示隐藏过渡,CSS3中 “hover” 样式和动画过渡的问题。

各位大大，请帮忙解决一下这个问题，先谢谢！

由于之前的代码不是全部帖出，可能造成一点信息误解。

以下是针对这个问题另外写的代码：

.nav {

width: 50px;

height: 50px;

overflow:hidden;

background-color: #09F;

transition: all ease-in-out 2s 0s;

}

.nav:hover {

/* 指定高度 */

height: 500px;

}

---------------------------------------------------------------------------------------------------------

0000

---------------------------------------------------------------------------------------------------------

现在问题就只有一个：

.nav:hover {height: 500px;} 会正常显示过渡效果；

.nav:hover {height: auto;} 则不会显示过渡效果。

由于.nav即不同的子级菜单的高度属性都不一定相同，所以不可能给每一个.nav设置hover样式。

那么如何能做到，.nav自动适应高度，又可以正常显示过渡效果呢？

css3 hover显示隐藏过渡,CSS3中 “hover” 样式和动画过渡的问题。相关推荐

elementui table组件和popover实现表格列内容过长，显示隐藏多余字段，hover显示所有内容；无内容或则内容少则不显示popover
elementui table组件和popover实现表格列内容过长,显示隐藏多余字段,hover显示所有内容:无内容或则内容少则不显示popover 1.场景效果 2.实现 3.进阶版 1.场景效果 ...
Flutter的AnimatedDefaultTextStyle实现文本样式的动画过渡切换效果
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章 AnimatedDef ...
显示/隐藏Mac系统中所有的隐藏文件
显示: 在终端输入:defaults write com.apple.finder AppleShowAllFiles YES隐藏: 在终端输入:defaults write com.apple.fi ...
在css中怎么显示隐藏div,css中实现div的显示和隐藏
div的visibility能够控制div的显示和隐藏,可是隐藏后页面显示空白: style="visibility: none;" document.getElementById ...
js 创建keyframe_Vue中使用create-keyframe-animation与动画钩子完成复杂动画
本篇文章主要介绍了 Vue中使用create-keyframe-animation与动画钩子完成复杂动画,分享给大家如何实现这个动画? 效果分析点`start`的时候,我们把整个动画拆分为两种效果 ...
Vue中的过度与动画
一.Vue中的过度效果下面让我们一起来学习一下vue中的过滤与动画当插入或删除包含在 transition 组件中的元素时,Vue 将会做以下处理: 自动监测目标元素是否应用了 CSS 过渡或动画 ...
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3)
伪元素选择器使用场景2-仿土豆网显示隐藏遮罩案例(CSS3) <!DOCTYPE html> <html lang="en"><head>< ...
php隐藏指定id的div,CSS_纯css3显示隐藏一个div特效的具体实现，复制代码代码如下: !DOCTYPE H - phpStudy...
纯css3显示隐藏一个div特效的具体实现复制代码代码如下: #showDiv { background-color:red; width:300px; height:300px; display: ...
[css] CSS3中的transition是否可以过渡opacity和display？
[css] CSS3中的transition是否可以过渡opacity和display? transition过渡display是有一个前提条件: 浏览器渲染是在每一帧的最后,每一帧都会执行以下操作: ...

css3 hover显示隐藏过渡,CSS3中 “hover” 样式和动画过渡的问题。

css3 hover显示隐藏过渡,CSS3中 “hover” 样式和动画过渡的问题。相关推荐

最新文章

热门文章

css3 hover显示隐藏过渡,CSS3中 “hover” 样式 和 动画过渡 的问题。

css3 hover显示隐藏过渡,CSS3中 “hover” 样式 和 动画过渡 的问题。相关推荐

最新文章

热门文章

css3 hover显示隐藏过渡,CSS3中 “hover” 样式和动画过渡的问题。

css3 hover显示隐藏过渡,CSS3中 “hover” 样式和动画过渡的问题。相关推荐