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

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是相当无关紧要，但我张贴它，以便您可以看到顶部悬停如何淡入淡出。我只是想将淡入淡出添加到背景地图主要元素的onmouseover事件。

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

任何想法，JavaScript是不是我的第一语言..;）

Answer 1

如果你可以使用jQuery，那么你可以这样做

FIDDLE DEMO

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

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

}); 

Answer 2

沟Javascript

如果我理解你的问题如果您正确地使用鼠标，则当您将鼠标悬停在某个元素上时，您希望在图像之间淡化，对吗这可以很容易地在纯CSS中完成。

• 给你想要的动画背景图像
• 添加一个子元素，那就是大小与其父相同的元素。这可以是一个<img>或带有背景图像的跨度或div
• 将子元素的不透明度设置为0，除非有人将鼠标悬停在父元素上方。

HTML

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

CSS

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

JavaScript是真棒，但我个人认为，你应该避免使用它进行简单的动画这样的，因为CSS更比自己做得更好。