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

这是迄今为止我的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是非常不相关的，但我发布了它，以便您可以看到顶部悬停是如何淡入淡出的。我只是想将onmouseover事件中的淡入淡出添加到背景贴图主元素中

所以我真的只需要在Javascript函数中添加淡入淡出，然后将该函数添加到mouseover事件处理程序中

---

Javascript不是我的第一语言

如果可以使用jquery，那么可以执行以下操作

放弃Javascript

如果我没弄错你的问题的话，当你在一个元素上悬停时，你想在图像之间淡入淡出，对吗？这可以很容易地在纯CSS中完成

指定要设置背景图像动画的元素 添加与父元素大小相同的子元素。这可以是一个，也可以是一个带有背景图像的span或div 将子元素的不透明度设置为0，除非有人将鼠标悬停在父元素上。 HTML

---

Javascript非常棒，但在我个人看来，你应该避免在这样的简单动画中使用它，因为CSS完全可以自己完成它。

你能使用Jquery吗？基本上。。例如，链接头部中的文件并根据代码的外观编辑一些参数。感谢您的回复。。但我之所以在CSS顶部包含javascript事件，是因为当绝对定位的锚/按钮悬停在上方时。。我希望后面的整个背景图像通过淡入来改变图像。感谢您的回复。。我已经在javascript函数的脚本标记之间添加了上面的代码。我是否需要在头部添加或链接Jquery文件以使其正常工作？是，则需要链接Jquery。如果您的javascript代码正常工作，那么即使这样也应该正常工作。如果您想要code.jquery.com/jquery-1.11.1.min.js>Richa，这里有一个链接。。正如您在这里看到的，它似乎仍然不起作用。您确定添加了jquery链接吗。？？它在控制台中显示为空。还要确保id和类是正确的，它工作正常吗？？当你在非洲盘旋时，你想让对方消失吗？？

#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;
 }

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

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

});

<div class="fading-bg">
    <img src="foo/bar.jpg" alt="stuff">
</div>

.fading-bg{
    position:relative;
    width: 100px;
    height: 100px;
    background: no-repeat center;
    background-size: cover;
}

.fading-bg img{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    -webkit-transition: opacity 500ms;
    transition: opacity 500ms;
}

.fading-bg:hover img{
    opacity: 1;
}