我一直无法在谷歌上找到任何东西,但是有可能在悬停/点击/其他时用jquery更改背景网址的顺序吗?
即:
background:
url('1st_bg.png') no-repeat center;
url('2nd_bg.png') no-repeat center;
url('3rd_bg.png') no-repeat center;
进入这个?
background:
url('3rd_bg.png') no-repeat center;
url('2nd_bg.png') no-repeat center;
url('1st_bg.png') no-repeat center;
使用jquery?
我似乎无法弄清楚如何移动我的CSS ...任何帮助将非常感激: - )
答案 0 :(得分:1)
看这个:DEMO
HTML
<body class="image" id="BODY">
<button id="changeOrder" style="position:absolute;bottom:100px;left:100px">CHANGE IMAGE ORDER</button>
</body>
CSS
.image {
background: url(http://radiantq.com/wp-content/uploads/2011/11/software_box.png) no-repeat 10px 10px, url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/Flower-wallpaper-29.jpg) no-repeat 90px 90px, url(http://3.bp.blogspot.com/-kEDW4tNSmpA/UYnb_TbNiqI/AAAAAAAAKlc/MuZ3D0k6xRs/s1600/wallpapers-of-Rose-Flower456.jpg) no-repeat 180px 180px;
background-size:100px 100px;
width:500px;
height: 500px;
}
.change {
background:url(http://www.hdwallpapers3d.com/wp-content/uploads/2013/04/Flower-wallpaper-29.jpg) no-repeat 10px 10px, url(http://radiantq.com/wp-content/uploads/2011/11/software_box.png) no-repeat 90px 90px, url(http://3.bp.blogspot.com/-kEDW4tNSmpA/UYnb_TbNiqI/AAAAAAAAKlc/MuZ3D0k6xRs/s1600/wallpapers-of-Rose-Flower456.jpg) no-repeat 180px 180px;
background-size:100px 100px;
width:500px;
height: 500px;
}
JQUERY SCRIPT
$("#changeOrder").click(function () {
$('#BODY').addClass('change');
});