javascript - 如何向更改图像鼠标悬停事件添加淡入淡出？

Question

到目前为止，这是我的 Javascript 函数:

function changeImg (){
    document.getElementById('main').style.backgroundImage = "url('./img/map/maphv.png')"
}

function changeBack () {
    document.getElementById('main').style.backgroundImage = "url('./img/map/map.png')"
}

这是在 HTML 中:

<div id="main"> 
    <a data-title="Africa" href="collection/africa.html" onmouseover="mouseoversound.playclip();changeImg()" onmouseout="changeBack()"><img class="africa" src="./img/map/africa.png" height="50"/> </a>

这是 CSS:

#main {
 background-image: url(../img/map/map.png);
 background-size: 100%;
 background-repeat: no-repeat;
 width: 100%;
 height: 580px;
 position: relative;
 }

#main img.africa {
 top: 244px;
 left: 397px;
 height: 33.5%;
 position: absolute;
 width: 18%;
 opacity:0;
 }


#main img.africa:hover {
 top: 244px;
 left: 397px;
 height: 33.5%;
 position: absolute;
 width: 18%;
 opacity:1;
 transition: opacity .5s ease-in-out;
   -moz-transition: opacity .5s ease-in-out;
   -webkit-transition: opacity .5s ease-in-out;
 }

所以 CSS 是完全无关紧要的，但我发布它是为了让您可以看到顶部悬停是如何淡入和淡出的。我只是想将淡入淡出添加到背景 map 主要元素的 onmouseover 事件。

所以我真的只需要在 Javascript 函数中添加淡入淡出并将该函数添加到鼠标悬停事件处理程序吗？

任何想法，因为 Javascript 不是我的第一语言.. ;)

Answer 1

如果你会使用 jquery，那么你可以做类似的事情

FIDDLE DEMO

$("#main").on("mouseenter", function () {

    $(".africa").stop(true, true).fadeOut(); /***fadeIn or fadeOut***/

});