Question

我尝试使用jQuery交换背景。但问题是它没有成功切换到新的背景，相反，旧的背景被删除了，我得到的是白色背景。

我一直在谷歌搜索并尝试将路径作为var而不是例如，以及其他一些不成功的建议。

我的jQuery函数如下所示：

$("#btn").hover(function () {
    $('#page1').css('background-image','url(../images/bg1_normal.jpg)');
});

我的CSS默认背景如下：

#page1 {
    height: 100vh;
    max-height: 100vh;
    background-image: url("../images/bg1_rw.jpg");
    background-repeat: no-repeat;
    background-size: 100%;
}

我使用Java Play Framework并且图片位于同一个文件夹中，因为默认背景有效，所以它是正确路径。

编辑：我也尝试使用网络上的img来源，只是为了100％确定它不是路径的一些问题，但它仍然只是使它变成白色

Answer 1

我相信当鼠标离开时，jQuery的hover()函数无法删除该特定样式。

你可以自己动手

$("#btn").on({
    mouseenter : function() {
        $('#page1').css('background-image','url(../images/bg1_normal.jpg)');
    },
    mouseleave : function() {
        $('#page1').removeAttr('style'); 
        // or simply set the backround again to the other image
    }
});

Answer 2

尝试.addClass和.removeClass函数 - 它很简单，所有样式的工作都在样式表文件中完成：

$("#btn").on({
    mouseenter : function() {
        $('#page1').addClass('inverted');
    },
    mouseleave : function() {
        $('#page1').removeClass('inverted'); 
    }
});

然后只需添加

#page1.inverted {
    //style as you need
}

到你的样式表。

Answer 3

如果您正在使用图像，则可以像这样进行图像交换

https://jsfiddle.net/RachGal/oee3guxz/

$("#flowers").mouseover(function () {
    var _this = $(this);
    var current = _this.attr("src");
    var swap = _this.attr("data-swap");
    _this.attr('src', swap).attr("data-swap",  current);
   _this.toggleClass("opaque");
});

.opaque {
    opacity:.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<img id='flowers' class="full" src='http://www.rachelgallen.com/images/snowdrops.jpg' width="500" height="400" data-swap='http://www.rachelgallen.com/images/daisies.jpg'  width="500" height="400" />

或者你可以像这样使用颜色

$("#color").mouseleave(function () {
         $("body").css("background-color","black");
});
$("#color").mouseover(function (){
         $("body").css("background-color","red");
});
$("#color").click(function(){
     $("body").css("background-color","green");
});

body, #color {
    height: 800px;
    width: 800px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="color">&nbsp;</div>

https://jsfiddle.net/RachGal/8p783jfo/

希望这有帮助

迪

在悬停上交换背景

3 个答案: