css3动画显示我不要鼠标放在需要显示的地方显示，放在li标签上显示怎么做
0
悬赏园豆：5
[已解决问题]
解决于 2017-08-03 20:09
下面是我的代码和问题，没有JavaScript和必须的图片，可以直接复制运行看问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css的动画用法</title> <style type="text/css"> body{ background: url(2.jpg);} ul li{ float: left; list-style-type: none; background: #564F48;opacity:0.8; width: 150px; height: 50px; line-height: 50px; text-align: center; color: #fff; cursor: pointer; position: relative;} ul li>div{ position: absolute; top: 50px; left: 0; width: 150px; height: 50px;line-height: 50px; text-align: center; } ul li div div{/* display: none;就是这里不能用这个，不然没动画效果*/ background: #4B4843;opacity:0.8; border:1px solid rgba(255, 255, 255, 0.1); transform:rotateY(90deg); -webkit-transform:rotateY(90deg); } ul li:hover{ background:#16927D; } ul li:hover div div{display: block; background: #157162; transform:rotateY(0deg); -webkit-transform:rotateY(0deg); } .dong1:hover,.dong2:hover,.dong3:hover,.dong4:hover,.dong5:hover{ background: #4B4843;} .dong1{ transition: 1.2s; -webkit-transition: 1.2s;} .dong2{ transition: 0.8s; -webkit-transition: 0.8s;} .dong3{ transition: 0.5s; -webkit-transition: 0.5s;} .dong4{ transition: 0.3s; -webkit-transition: 0.3s;} .dong5{ transition: 0.2; -webkit-transition: 0.2s;} </style> </head> <body> <ul> <li>我的动漫专区 <div> <div class="dong1">海贼王</div> <div class="dong2">银魂</div> <div class="dong3">进击的巨人</div> <div class="dong4">攻壳机动队</div> <div class="dong5">攻壳机动队</div> </div> </li> <li>我的动漫区 <div> <div class="dong1">棋魂</div> <div class="dong2">未麻的部屋</div> <div class="dong3">甲贺忍法帖</div> <div class="dong4">钢之炼金术师fa</div> <div class="dong5">攻壳机动队</div> </div> </li> <li>我的漫画区 <div> <div class="dong1">食梦者</div> <div class="dong2">全金属狂潮</div> <div class="dong3">风剑传奇</div> <div class="dong4">钢之炼金术师fa</div> <div class="dong5">攻壳机动队</div> </div> </li> <li>我的盒子动漫 <div> <div class="dong1">食梦者</div> <div class="dong2">全金属狂潮</div> <div class="dong3">风剑传奇</div> <div class="dong4">钢之炼金术师fa</div> <div class="dong5">攻壳机动队</div> </div> </li> <li>联系我们 <div> <div class="dong1">食梦者</div> <div class="dong2">全金属狂潮</div> <div class="dong3">风剑传奇</div> <div class="dong4">钢之炼金术师fa</div> <div class="dong5">攻壳机动队</div> </div> </li> </ul> </body> </html>
运行放在导航条有动画效果，但是我放在li标签底下中间90度肉眼看不到重叠的地方动画效果也有，我底下是要排版放内容的，所以只要放在li标签有效果，别的地方不触发动画，以上求大神尽力能不用JavaScript解绝，能用原始的html和css解决更好，实在不行JavaScript也可以，主要是我想做一个纯粹的css3动画菜单栏，希望大神解惑
最佳答案
1
你可以试试:
ul li>div{visibility: hidden;}
ul li:hover div div{visibility: visible;}
收获园豆：4
可以，加进去解决了，哇塞，可以啊，我都忘了隐藏有两个标签可以用了，没想到这个隐藏不影响css3动画，可以。
@玉狐大神: 应该是因为这个只是可见性改变，不影响它的元素结构，哈哈，个人理解
其他回答(1)
0
你这个问题描述的完全没听懂
ul li>div{ position: absolute; top: 50px; left: 0; width: 150px; height: 0;line-height: 50px; text-align: center; }
改成这个应该就是你要的效果，我猜你应该是这个意思
收获园豆：1
额，我的意思不是这个是这个我截张图片给你看看
就是我鼠标放在li标签的下面中间的地方下拉会出来，这个怎么解决