首页 新闻 搜索 专区 学院

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动画菜单栏,希望大神解惑

玉狐大神的主页 玉狐大神 | 初学一级 | 园豆:197
提问于:2017-08-01 20:40
< >
分享
最佳答案
1

你可以试试:

ul li>div{visibility: hidden;}
ul li:hover div div{visibility: visible;}

收获园豆:4
wo很迷糊 | 菜鸟二级 |园豆:208 | 2017-08-03 15:15

可以,加进去解决了,哇塞,可以啊,我都忘了隐藏有两个标签可以用了,没想到这个隐藏不影响css3动画,可以。

玉狐大神 | 园豆:197 (初学一级) | 2017-08-03 19:58

@玉狐大神: 应该是因为这个只是可见性改变,不影响它的元素结构,哈哈,个人理解

wo很迷糊 | 园豆:208 (菜鸟二级) | 2017-08-04 10:36
其他回答(1)
0

你这个问题描述的完全没听懂

ul li>div{ position: absolute; top: 50px; left: 0; width: 150px; height: 0;line-height: 50px; text-align: center; }

改成这个应该就是你要的效果,我猜你应该是这个意思

收获园豆:1
与阳光握手言和 | 园豆:373 (菜鸟二级) | 2017-08-02 10:24

额,我的意思不是这个是这个我截张图片给你看看

支持(0) 反对(0) 玉狐大神 | 园豆:197 (初学一级) | 2017-08-02 15:49

就是我鼠标放在li标签的下面中间的地方下拉会出来,这个怎么解决

支持(0) 反对(0) 玉狐大神 | 园豆:197 (初学一级) | 2017-08-02 15:50
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册