jquery - 元素悬停时的背景图像转换

Question

我有一个关于 CSS 和 JQuery 的复杂问题。我将 body 的背景颜色设置为绿色，并且当用户将鼠标悬停在按钮上时，我想将背景更改为图像。我使用 JQuery 来更改背景图像，但我希望它能够平滑地更改背景(过渡)。我使用了 CSS 过渡，但似乎在这种情况下不起作用。任何想法？谢谢

$(document).ready(function() {
    $("#icon-contact").hover(function () {
        $("body").toggleClass("body-icon-contact-hover");
    });
}
);
$(document).ready(function() {
    $("#icon-album").hover(function () {
        $("body").toggleClass("body-icon-album-hover");
    });
});

body{
	background-color:#1bbc9b;
	transition: all 3s ease;
}
.body-icon-contact-hover{
	background-image:url(../img/contact-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}
.body-icon-album-hover{
	background-image:url(../img/album-bg.jpg);
	background-repeat:no-repeat;
	background-size:cover;
}

<div id="center-container">
            	<a class="center-circle" id="icon-contact">
                	<div class="tooltip">
                    	Contact US
                    	<div class="triangle">
                        </div>
                    </div>
                </a>
                <a class="center-circle" id="icon-logo">
                </a>
                <a class="center-circle" id="icon-album">
                	<div class="tooltip">
                    	Album
                    	<div class="triangle">
                    	</div>
                    </div>
                </a>
            </div>

Answer 1

不幸的是，您无法转换背景图像，这里是 a full list of properties you can animate .

如果您不想更改 JS，那么最简单的方法是为内容和背景创建单独的容器，然后转换不透明度而不是背景图像:

$(document).ready(function() {
    $("#icon-contact").hover(function () {
        $(".background").toggleClass("body-icon-contact-hover");
    });
}
);
$(document).ready(function() {
    $("#icon-album").hover(function () {
        $(".background").toggleClass("body-icon-album-hover");
    });
});

body {
    margin: 0;
}

.background {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 1s ease;
}

.content {
    position: relative;
}

.body-icon-contact-hover{
    opacity: 1;
	background-image:url(http://dummyimage.com/1000x1000/eee/fff&text=this+is+an+image);
	background-repeat:no-repeat;
	background-size:cover;
}

.body-icon-album-hover{
    opacity: 1;
	background-image:url(http://dummyimage.com/1000x1000/ddd/fff&text=this+is+an+image-2);
	background-repeat:no-repeat;
	background-size:cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="background"></div>
<div class="content">
    <div id="center-container">
    <a class="center-circle" id="icon-contact">
        <div class="tooltip">
            Contact US
            <div class="triangle">
            </div>
        </div>
    </a>
    <a class="center-circle" id="icon-logo">
    </a>
    <a class="center-circle" id="icon-album">
        <div class="tooltip">
            Album
            <div class="triangle">
            </div>
        </div>
    </a>
    </div>
</div>

http://jsfiddle.net/bartkarp/rvh17Lua/

尽管恕我直言，你永远不应该为整个背景设置动画(糟糕的 UI/UX)。