悬停交换背景

我想用jQuery交换背景。但问题是，它没有成功切换到新的背景，相反，旧的被删除，我得到一个白色的背景。悬停交换背景

我一直在谷歌搜索，并尝试把路径作为一个变种，而不是例如，和其他一些不成功的建议。

我的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和图片是在同一文件夹，因为默认背景有效，所以它是正确路径。

编辑：我试过以及从web使用img源码，只是为了100％确定它不是路径的一些问题，但它仍然只是使它变白。

来源

2016-04-25 Viktor Plane

当然，我发现后立即意识到：P – Coleman

尝试.addClass和.removeClass功能 - 它很简单，所有的工作作风是完成样式表文件：

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

，然后简单地添加

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

到您的样式表。

来源

2016-04-25 21:45:01

好和易于修复，谢谢！ –

我相信当鼠标离开时，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 
    } 
});

来源

2016-04-25 21:27:13 adeneo

它使它至少在鼠标离开时回到正常的背景，但只有在输入时才切换到白色背景。 –

如果图像是它应该是的地方，它不应该这样做 – adeneo

这很奇怪，我100％肯定它是图像的正确路径，它在那里。检查它至少10次，因为这是我首先想到的。 –

如果您使用的图像，你可以做一个形象的交换这样

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" />

或如果你可以只使用co LOR这样

$("#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/

希望这有助于

瑞秋

来源

2016-04-25 21:40:31

第二个工作在两个悬停和点击 –

悬停交换背景

回答

相关问题