Como aparecer camada de mascaramento quando a suspensão do JS Mouse

Este artigo descreve o método de navegar na camada de máscara no JS Mouse. Compartilhe para sua referência. O método de implementação específico é o seguinte:

Código da página HTML:

Copie o código da seguinte forma: <ul>

<li> <a data-title = "science" href = "#"> <i style = "background-imagem: url (imagens/xiaozhan/main_ojls_1aa6000200891260.jpg)">

</i> <span> ciência </span> </a> </li>

<li> <a data-title = "animation" href = "#"> <i style = "background-image: url (imagens/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)">

</i> <span> anime </span> </a> </li>

<li> <a data-title = "Life" href = "#"> <i style = "background-image: url (imagens/xiaozhan/main_otnr_43a60000050a118c.jpg)">

</i> <span> vida </span> </a> </li>

<li> <a data-title = "ilustration" href = "#"> <i style = "background-imagem: url (imagens/xiaozhan/main_ud3z_2e510002074f118e.jpg)">

</i> <span> ilustração </span> </a> </li>

<li> <a data-title = "music" href = "#"> <i style = "background-imagem: url (imagens/xiaozhan/main_krfk_6323000018bd125d.jpg)">

</i> <span> Música </span> </a> </li>

<li> <a data-title = "natural" href = "#"> <i style = "background-imagem: url (imagens/xiaozhan/main_uabs_764f0001ff601190.jpg)">

</i> <pan> Natural </span> </a> </li>

</ul>

Código JS:

Copie o código da seguinte forma: <script type = "text/javascript">

$ (function () {

// A camada de máscara, a altura muda quando o mouse se move para cima e fica mais claro

var $ site_li = $ (". Site-Tag Li");

$ site_li.hover (function () {

var indexs = $ site_li.index (this);

$ (this) .css ("altura", "90"). encontre (".

// Obtenha o índice do elemento atual de clique em todos os elementos LI

// alerta (índices+1);

$ (this) .prev (). css ("altura", "30");

$ (this) .next (). css ("altura", "30");

}, function () {

$ site_li.css ("altura", "50");

});

});

</script>

Código CSS:

Copie o código da seguinte forma: Ul li {estilo de lista: nenhum;}

.SITE-TAG {Width: 200px; estouro: oculto; Z-Index: 5;}

. Largura: 200px; Altura: 50px; Margin-Bottom: 1px; estouro: oculto;

transição: altura 0,5s facilidade; -Webkit-transição: altura 0.5s facilidade;

-moz-transição: altura 0.5s facilidade; -O-transição: altura 0.5s facilidade;}

. Size da fonte: 16px; Peso da fonte: negrito; altura da linha: 50px;}

.SITE-TAG Li i {Display: Block; Altura: 90px; Posição de fundo: centro central;

Opacidade: 0,3; filtro: alfa (opacidade = 3); /*Defina transparência*/

-Webkit-transição: opacidade 0,5 facilidade; /**/

-Webkit-filtro: escala de cinza (60%); /**/

}

.SITE-TAG LI: Passe o mouse i {Opacity: 0.9; -Webkit-filter: escala de cinza (0%); Transição: Opacity 0,5s facilidade;}

.TAG-TIT {Display: Block; Altura: 100px; Largura: 700px; Cor:#666; Size da fonte: 14px;}

.SITE-TAG LI .TAG-TIT {Posição: Absolute; Top: 0px; Esquerda: 10px; Shadow Text: 1px 1px 1px RGB (0,0,0,0,1);}

A: Hover .Tag-tit {TEXT-SHADOW: 1PX 1PX 1PX RGB (0,0,0,0,5);}

Espero que este artigo seja útil para a programação JavaScript de todos.