元素悬停时的背景图像过渡答案

【问题标题】：background-image transition when an element hovers元素悬停时的背景图像过渡
【发布时间】：2014-12-05 19:54:21
【问题描述】：

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

【问题讨论】：

标签： jquery css

【解决方案1】：

很遗憾，您无法转换 background-image，这里是 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）。

【讨论】：

【解决方案2】：

您也可以使用 css a div 可以添加为覆盖 100% width 和 height

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

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

【讨论】：