在 Nextjs 中，當我將滑鼠懸停在影像上時，我可以使用狀態更改 src，但我想使用淡入淡出等影片來做到這一點。
const [logoSrc, setLogoSrc] = useState("/logo.png");
<Image
src={logoSrc}
width={237}
height={64}
priority
onm ouseEnter={() => {
setLogoSrc("/hover-logo.png");
}}
onm ouseOut={() => {
setLogoSrc("/logo.png");
}}
/>
uj5u.com熱心網友回復：
可悲的是，影像的src適當性不是影片屬性的一部分。如果你想要一個影片，你可以加載兩個影像，通過 CSS 隱藏和顯示它們，如下所示：
body {
margin: 0;
}
.img-container {
position: relative;
height: 100vh;
}
.img-container .img2 {
opacity: 0;
transition: 1s;
}
.img-container:hover .img2 {
opacity: 1;
}
.img-container img {
display: block;
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
}<div class="img-container">
<img class="img1" src="https://images.unsplash.com/photo-1648737966174-c5ef7b893fcd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" />
<img class="img2" src="https://images.unsplash.com/photo-1654175979772-0f0eaa672d08?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4fHx8ZW58MHx8fHw=&auto=format&fit=crop&w=500&q=60" />
</div>uj5u.com熱心網友回復：
您可以將 css 樣式添加到 next/image 組件 - 請參閱https://nextjs.org/docs/api-reference/next/image并搜索“CSS 樣式”。
然后就可以使用css3轉場了，這里有很好的描述：CSS3 Transition - Fade out effect
玩得開心 ：）
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/494618.html
標籤：javascript css 反应 下一个.js