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一切正常。