我想是个简单的问题,但似乎找不到解决方案......
相当简单的 HTML 结构:.interview
有一个子级 .overlay
,即 display:none
。将鼠标悬停在 .interview
上时,我想淡出 child 。但是不起作用。
.interview {
background:red;
position:relative;
height:710px;
/*Transition*/
transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-ms-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.interview .overlay {
position:absolute;
background:rgba(0, 0, 0, 0.6);
height:100%;
width:100%;
top:0;
left:0;
display:none;
}
.interview:hover {
.overlay { display:block };
}
为了在这里工作,我必须将转换放在哪里?
最佳答案
display:none; removes a block from the page as if it were never there.
使用 opacity
而不是 display 属性不适用于过渡
.interview {
background: red;
position: relative;
height: 710px;
/*Transition*/
transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-webkit-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-moz-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-o-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
-ms-transition: all .5s cubic-bezier(0.19, 1, 0.22, 1) 0s;
}
.interview .overlay {
position: absolute;
background: rgba(0, 0, 0, 0.6);
height: 100%;
width: 100%;
top: 0;
left: 0;
opacity: 0;
transition: 1s linear;
}
.interview:hover .overlay {
opacity: 1;
}
<div class="interview">
<div class="overlay"></div>
</div>
关于html - CSS:带有子元素过渡的动画悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27531524/