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>，也可以是带背景图片的span或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本身就能够做到这一点。

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

2 个答案: