我嘗試使用 jquery.js 在圖像塊中創建懸停 gif 動畫。我在以三列網格排列的水平或垂直塊中使用這些動畫。當您將鼠標懸停在該塊上時，將啟動 gif，并在該 gif 上添加混合模式下的彩色表單和排版在我的第一個示例中，一切正常，但是當我想將此代碼添加到我的網站頁面并更改 Z-index 以使這些元素不再重疊在我的 menu-wrapper 頂部時，gif 不再起作用（第二個例子）。第一個例子：$(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;}