我嘗試使用 jquery.js 在圖像塊中創(chuàng)建懸停 gif 動(dòng)畫。我在以三列網(wǎng)格排列的水平或垂直塊中使用這些動(dòng)畫。當(dāng)您將鼠標(biāo)懸停在該塊上時(shí)，將啟動(dòng) gif，并在該 gif 上添加混合模式下的彩色表單和排版在我的第一個(gè)示例中，一切正常，但是當(dāng)我想將此代碼添加到我的網(wǎng)站頁(yè)面并更改 Z-index 以使這些元素不再重疊在我的 menu-wrapper 頂部時(shí)，gif 不再起作用（第二個(gè)例子）。第一個(gè)例子：$(function () {  $(".playgif").hover(function () {    var stat = $(this).find("img").attr("src");    $(this).find("img").attr("src", $(this).find("img").data("swap"));    $(this).find("img").data("swap", stat);  })});.grille{position:relative;margin-top: 120px;z-index: 97;width: 100%;height: auto;cursor: url(../images/mini-curseur.html), pointer;}.colonne1{height: auto;   position: relative;width: 33.3333%;float: left;transition: all 250ms ease-out;}.colonne2{height: auto;   position: relative;width: 33.3333%;float: left;transition: all 250ms ease-out;}.colonne3{height: auto;   position: relative;width: 33.3333%;float: left;transition: all 250ms ease-out;}.titre_vignette{font-family: 'Libre Baskerville', serif;font-size:2vw;}.hover_vignettes{z-index:90;width:100%;height:100%;left:0;right:0;z-index:100;position: absolute;margin: 0 auto;opacity: 0;text-align:center;-webkit-transition: opacity 250ms ease-in-out;transition:opacity 250ms ease-in-out;}.hover_color{background:#FF0000;background-blend-mode: difference;}.texte_vignette{margin-top:30%;opacity:0;color:#FFF;-webkit-transition: all 600ms ease-in-out;transition: all 600ms ease-in-out;}.informations_vignette{font-size:1.3vw;margin-top:1.5vw;-webkit-transition: all 600ms ease-in-out;transition: all 600ms ease-in-out;}.vignette_horizontale:hover .hover_vignettes{opacity:0.8;-ms-transform: opacity(0.8); -webkit-transform: opacity(0.8);transform: opacity(0.8);}.vignette_horizontale:hover .texte_vignette{opacity:1;margin-top:26%;}.vignette_horizontale:hover .informations_vignette{    margin-top:0.5vw;}