我有兩張圖片，一張放在另一張上面。我想出了如何在滑鼠輸入上顯示影像，但似乎無法弄清楚在哪里呼叫 css 轉換屬性。基本上，一旦滑鼠懸停在顯示的影像上，我就會嘗試為顯示的影像添加一個很好的平滑過渡。現在我所要做的就是在滑鼠進入后將顯示設定為“阻止”，但影像顯示的體驗是突然的。請幫忙
首先顯示的影像
const imageOne = {
backgroundImage: "url('/images/h2.png')",
backgroundRepeat: 'no-repeat',
backgroundSize: 'cover',
backgroundPosition: 'center',
height: 400,
width: '100%',
position: 'relative',
zIndex: 1,
borderRadius: 5,
border: 'solid black 2px'
}
滑鼠懸停時顯示的影像二
.overlay-image-1 {
background-image: url("/images/h1.png");
object-fit: cover;
opacity:1;
background-size: cover;
background-position: center;
position:absolute;
width:100%;
height:100%;
display:none;
z-index:2;
border-radius: 3px;
}
實際組件
<Grid
onm ouseEnter={() => setHover(true)}
onm ouseLeave={() => setHover(false)}
style={imageOne}>
<div style={{display: hover ? 'block' : ''}}
className='overlay-image-1'>
</div>
</Grid>
uj5u.com熱心網友回復：
CSS 過渡不適用于 display:none / display:block 屬性，請嘗試：
可見性：隱藏；& 能見度：可見；使過渡正常作業。
要啟用過渡，只需設定不透明度：0；可見性：隱藏；和不透明度：1；可見性：可見；
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/488231.html
上一篇：在Next.js中更改頁面時，Tailwind影片播放兩次？
下一篇：我缺少任何鏈接-HTML/CSS