我想在单击时将背景图像替换为另一个背景图像。最终我希望能够通过单击图像来打开和关闭图像。
HTML
<div class="arrow-up" role="button"></div><div class="arrow-down" role="button"></div>
CSS
.arrow-up {
width: 15px;
height: 14px;
background-image: url("//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")!important;
background-position: center center;
border: none!important;
}
.arrow-down {
margin: 2px 0px 0px 0px;
width: 100%;
height: 14px;
display: block;
cursor: pointer;
background-position: center center;
background-repeat: no-repeat;
width: 15px;
margin-left: auto;
margin-right: auto;
outline: none;
}
.arrow-down {
width: 15px;
height: 14px;
background-image: url("//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")!important;
background-position: center center;
border: none!important;
}
.arrow-up {
margin: 2px 0px 0px 0px;
width: 100%;
height: 14px;
display: block;
cursor: pointer;
background-position: center center;
background-repeat: no-repeat;
width: 15px;
margin-left: auto;
margin-right: auto;
outline: none;
}
.arrow-down {
background-position: -30px -24px!important;
}
.arrow-down {
background-image: url(sprite-reddit.ZDiVRxCXXWg.png);
background-position: 0px -865px;
background-repeat: no-repeat;
}
.arrow-up {
background-position: 0px -24px!important;
}
JQuery
$(document).ready(function () {
$(".arrow-up").click(function () {
$(this).css("background-image", "http://i.imgur.com/rySpqwS.jpg");
});
});
我可以像这样切换图像吗?因为这个解决方案似乎不起作用。
Jquery
$(document).ready(function () {
$(".arrow-up").click(function () {
if ($(this).css("background-image") == "//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png")
{
$(this).css("background-image", "url(http://imgur.com/dpvAtIb.jpg)")
}
else {
$(this).css("background-image", "url(//b.thumbs.redditmedia.com/b3vXuNpkEkQVRIBnRfoVOgBmT-5X4BEnyMoP85J2QIg.png)")
}
});
});
最佳答案
背景图像的正确 CSS 值为 url(image)
$(document).ready(function () {
$(".arrow-up").click(function () {
$(this).css("background-image", "url(http://i.imgur.com/rySpqwS.jpg)");
});
});
请注意,javascript 无法设置背景图像,因为它是在 CSS 中使用 !important
设置的,而 !important
会覆盖内联样式,因此您在您从样式中删除 !important
之前,不会看到任何更改。
使用 !important
通常意味着您在某件事上惨败,这不是您应该在所有样式中使用的东西。
关于javascript - JQuery - 单击时将背景图像替换为另一个背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36106985/