這是我所能做到的。
容器上的背景影像是用行內css設定的（否則無法作業）。
我怎樣才能在影像變化之間有任何一種平滑的過渡呢？
function onmouseover(/span>) {
// alert("Hello! I am an alert box!!");
var element = document.getElementById('conf'/span>)。
element.style.backgroundImage = "url('/imgs/jpg/stats.jpg') ";
}
function onmouseout（）{
// alert("Hello! I am an alert box!!");
var element = document.getElementById('conf'/span>);
element.style.backgroundImage = "url（'/imgs/jpg/welcome_back.jpg'）"。
}
這段代碼實際上是在改變已經設定的背景影像。這個交易發生的速度非常快，也非常靈敏
uj5u.com熱心網友回復：
background是可影片的CSS屬性之一，所以你可以在它上面設定一個過渡。
這個片段使用了問題中給出的代碼，其中有一個id為conf的元素，該元素上有一個可以懸停的subdiv元素。已經設定的主要內容是：
transition: background-image 1s linear;
在conf中，這樣背景就會平穩地變化。
。const conf = document. getElementById('conf'/span>)。
const subdiv = document.getElementById('subdiv') 。
subdiv.addEventListener('mouseover', onm ouseover) 。
subdiv.addEventListener('mouseout', onm ouseout)。
function onmouseover（） {
// alert("Hello! I am an alert box!!");
var element = document.getElementById('conf'/span>);
element.style.backgroundImage = "url('https://picsum.photos/id/1015/200/300')"。
}
function onmouseout（）{
// alert("Hello! I am an alert box!!");
var element = document.getElementById('conf'/span>);
element.style.backgroundImage = "url('https://picsum.photos/id/1016/200/300')"。
}#conf {
transition: background-image 1s linear;
width: 50vw;
height: 50vw;
background-image: url（'https://picsum.photos/id/1016/200/300'）。
background-size: cover;
}
#subdiv {
width: 20vw;
height: 20vw;
background-color: 黃色。
字體大小: 30px;
}<div id="conf"> /span>
<div id="subdiv"/span>> 懸停在我</div>>
</div>uj5u.com熱心網友回復：
你只能通過HTML和CSS使用transition屬性來實作這一點
span class="hljs-selector-tag">img {
position: absolute;
transition: opacity 1s easy-in-out;
}
img.top：hover {
opacity: 0;
}<img src="https://picsum. photos/id/237/200/300" />< img class="top" src="https: //picsum. photos/id/238/200/300"/>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/321622.html
標籤：