问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css3过渡效果

头像
peierhope
    6511222

    有一个div，当鼠标移动到div上，上面的遮罩层出现从下到上过渡效果。现在我定位放上去，height设置0px；hover不起作用，该怎么布局呢？
    <style>
    html,body{
    margin:0;
    padding:0;
    }
    .aa{
    width: 400px;
    height:289px;
    }
    .aa img{
    width:100%;
    }
    .mask{
    width:400px;
    height:1px;
    background: #000;
    position: absolute;
    top:0;
    left: 0;
    transition: all 1s;
    }
    .mask:hover{
    height:289px;
    }
    </style>
    <body>

    <div class="aa"><img src="img-1.jpg"></div>

    <div class="mask"></div>

    css
    阅读 3.4k
    4 个回答
    得票最新
    头像
    初入的小白
      68925
      ✓ 已被采纳

      Dom结构本身有问题 ，不够语义化。

      <div class="aa">
    <img src="photo.png">
    <p class="mask"></p>
</div>
      html,body{
margin:0;
padding:0;
}
.aa{
width: 400px;
height:300

px;
overflow: hidden;
position: relative;
}
.aa img{
width:100%;
height:300px;
}
.mask{
width:400px;
height:300px;
background: #000;
position: absolute;
transform: translateY(0);
transition:all 0.4s linear;
}
.aa:hover .mask{
transform: translateY(-300px);
}
      头像
      Junx
        84149

        你将高度设置为1px， 那他触发hover的高度就只有1px， 你鼠标移到div.aa的时候肯定是不会触发呀
        可以这样写

        .aa:hover .mask{
    height:289px;
}

        这是鼠标移动到div.aa的时候触发hover改变div.mask的样式。

        头像
        amsri
          1243
          .mask{
    width:400px;
    height:0px;
    background: #000;
    position: absolute;
    top:0;
    left: 0;
    transition: all 1s;
}
.aa:hover ~ .mask{
    height:289px;
    transition: all 1s;
}
          <div class="aa"><img src="img-1.jpg"></div>
<div class="mask"></div>
          头像
          小童牧歌
            6628

            hover应该是作用到 div 上啊

            .aa:hover + .mask{
    height:289px;
}
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题