元素懸停時的背景圖像轉換

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{ 
 
\t background-color:#1bbc9b; 
 
\t transition: all 3s ease; 
 
} 
 
.body-icon-contact-hover{ 
 
\t background-image:url(../img/contact-bg.jpg); 
 
\t background-repeat:no-repeat; 
 
\t background-size:cover; 
 
} 
 
.body-icon-album-hover{ 
 
\t background-image:url(../img/album-bg.jpg); 
 
\t background-repeat:no-repeat; 
 
\t background-size:cover; 
 
}

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

Answer 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; 
 
\t background-image:url(http://dummyimage.com/1000x1000/eee/fff&text=this+is+an+image); 
 
\t background-repeat:no-repeat; 
 
\t background-size:cover; 
 
} 
 

 
.body-icon-album-hover{ 
 
    opacity: 1; 
 
\t background-image:url(http://dummyimage.com/1000x1000/ddd/fff&text=this+is+an+image-2); 
 
\t background-repeat:no-repeat; 
 
\t 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/

雖然恕我直言，你不應該動畫整個背景（糟糕的用戶界面/用戶體驗）。

Answer 2

你也可以使用CSS一個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>