我正在努力在 .blue div 上進行轉換，同時懸停父級 - .red div。
我想要實作的是一個緩慢的過渡，比如從 display: none 到 block 的 1s。
樣式表在 SCSS 中并且是嵌套的。有人可以幫我嗎？
Codepen 小提琴
HTML：
<div class='app'>
<div class='red'>
<div class="blue"></div>
</div>
</div>
社會保障：
.app {
heigh: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
.red {
position: relative;
background-color: red;
height: 30rem;
width: 30rem;
&:hover {
.blue {
display: block;
}
}
.blue {
display: none;
height: 10rem;
width: 10rem;
position: absolute;
background-color: blue;
// transition: 1s; DOESNT WORK
}
}
}
uj5u.com熱心網友回復：
.app {
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
.red {
position: relative;
background-color: red;
height: 30rem;
width: 30rem;
&:hover {
.blue {
opacity: 1;
}
}
.blue {
opacity: 0; //add opacity
height: 10rem;
width: 10rem;
position: absolute;
background-color: blue;
transition: 1s;
}
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/344714.html
上一篇：如何在css網格列中居中專案？