悬停时交换背景答案

【问题标题】：Swap background on hover悬停时交换背景
【发布时间】：2016-04-25 21:18:03
【问题描述】：

我正在尝试使用 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% 确定路径没有问题，但它仍然只会让它变白。

【问题讨论】：

当然，在我发布之后就意识到了这一点：P

标签： javascript jquery html css playframework

【解决方案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
    }
});

【讨论】：

它至少在鼠标离开时返回到正常背景，但在进入时仍然切换到白色背景。
如果图像在它应该在的位置，它不应该那样做
这很奇怪，我 100% 确定它是图像的正确路径，而且它就在那里。至少检查了 10 次，因为这是我想到的第一件事。
你说得对，它确实适用于 Web URL。但有趣的是，图片确实在那个文件夹中。可能是因为在构建之后应用了jQuery，然后图像实际上在另一个文件夹中？

【解决方案2】：

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

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

然后简单地添加

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

到您的样式表。

【讨论】：

【解决方案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/

希望对你有帮助

拉赫

【讨论】：