我對這個有點麻煩。所以我試圖在元素未懸停后反轉影片（我已經有了懸停時播放的影片，我只想反轉它）。
這是關鍵幀
@keyframes appearbutton {
0%{
width:0px;
height:0px;
}
50%{
width:0px;
height:30px;
}
100%{
width:30px;
height:30px;
}
}
并使用 js 我試圖檢查何時使用事件監聽器取消懸停按鈕
window.load = Loaded();
function Loaded(){
LoadImages();
var searchitems = document.getElementById("siip");
searchitems.addEventListener(onmouseleave, ReverseAnim());
}
function LoadImages(){ /// This works and is not a problem
...
}
function ReverseAnim(){
console.log("Test");
}
但是每次頁面加載時都會呼叫該函式，并且我在控制臺中看到“測驗”，當我懸停按鈕時，甚至沒有出現第二個“測驗”。
這也是我的 HTML，每當滑鼠懸停在“siip”元素上而不是輸入上，但影片在 CSS 內的輸入上時，我都會檢查。
<div id="searchbar">
<div class="searchitems" id="siip">
<img src="images/searchbutton.png">
<input type="text" class="textcassette" id="txtcass">
<input type="sumbit" class="submitbutton" id="subbutt">
</div>
</div>
uj5u.com熱心網友回復：
您直接呼叫該函式，您必須傳遞該函式的參考，并且您必須使用 mouseleave 而不是 onm ouseleave 并且它應該用引號引起來
window.load = Loaded();
function Loaded(){
LoadImages();
var searchitems = document.getElementById("siip");
searchitems.addEventListener('mouseleave', ReverseAnim);
}
function LoadImages(){ /// This works and is not a problem
}
function ReverseAnim(){
console.log("Test");
}@keyframes appearbutton {
0%{
width:0px;
height:0px;
}
50%{
width:0px;
height:30px;
}
100%{
width:30px;
height:30px;
}
}<div id="searchbar">
<div class="searchitems" id="siip">
<img src="images/searchbutton.png">
<input type="text" class="textcassette" id="txtcass">
<input type="sumbit" class="submitbutton" id="subbutt">
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/512588.html