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

Question

我有一个CSS和JQuery的复杂问题。 我将我身体的背景颜色设置为绿色，当用户将鼠标悬停在按钮上时，我想将背景更改为图像。 我使用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

很遗憾，您无法转换background-image，此处为a full list of properties you can animate。

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

＆＃13;

＆＃13;

$(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");
    });
});

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

虽然恕我直言，但你永远不应该为整个背景设置动画（UI / UX很差）。

Answer 2

你还可以使用css div可以添加为100% width和height

的叠加层

＆＃13;

＆＃13;

a {
  display: block;
  color: red;
  font-size: 30px;
}
.overlay {
  opacity: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  transition: .5s linear;
  z-index: -1;
}
#icon-contact:hover ~ .overlay {
  opacity: 1;
  background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-69737.jpg);
}
#icon-album:hover ~ .overlay {
  opacity: 1;
  background: url(http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-79573.jpg);
}

＆＃13;

<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-album">
    <div class="tooltip">
      Album
      <div class="triangle">
      </div>
    </div>
  </a>

  <div class="overlay"></div>
</div>

＆＃13;

＆＃13;

＆＃13;