Z-index 阻止 gif 动画的功能 | Jquery CSS HTML JS

Question

我尝试使用 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;}

Answer 1

控制台中有该消息。我必须更改脚本的顺序jquery.js，并且gif.js一切正常。