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.