Cómo aparecer en enmascarar la capa cuando la suspensión del mouse JS

Este artículo describe el método de navegar la capa de máscara en JS Mouse. Compártelo para su referencia. El método de implementación específico es el siguiente:

Código de página HTML:

Copie el código de la siguiente manera: <ul>

<li> <a data-title = "Science" href = "#"> <i style = "Background-Image: URL (Images/Xiaozhan/Main_OJLS_1AA6000200891260.jpg)">

</i> <span> Science </span> </a> </li>

<li> <a data-title = "animation" href = "#"> <i style = "en segundo plano: url (imágenes/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)">

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

<li> <a data-title = "life" href = "#"> <i style = "Background-Image: URL (Images/xiaozhan/main_otnr_43a60000050a118c.jpg)">

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

<li> <a data-title = "ilustration" href = "#"> <i style = "en segundo plano: url (imágenes/xiaozhan/main_ud3z_2e510002074f118e.jpg)"> ">

</i> <span> Ilustración </span> </a> </li>

<li> <a data-title = "music" href = "#"> <i style = "en segundo plano: url (imágenes/xiaozhan/main_krfk_6323000018bd125d.jpg)">

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

<li> <a data-title = "natural" href = "#"> <i style = "en segundo plano: url (imágenes/xiaozhan/main_uabs_764f0001ff601190.jpg)">

</i> <span> natural </span> </a> </li>

</ul>

Código JS:

Copie el código de la siguiente manera: <script type = "text/javaScript">

$ (function () {

// La capa de máscara, la altura cambia cuando el mouse se mueve hacia arriba y se vuelve más claro

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

$ Site_li.Hover (function () {

Var indexs = $ Site_li.index (this);

$ (this) .css ("altura", "90"). Find (". Tag-tit"). CSS ("Top", "30"). CSS ("Color", "#ffff");

// Obtener el índice del elemento de clic actual en todos los elementos LI

// alerta (índices+1);

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

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

}, función () {

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

});

});

</script>

Código CSS:

Copie el código de la siguiente manera: ul li {list-style: none;}

.Site-Tag {ancho: 200px; desbordamiento: oculto; Índice z: 5;}

.Site-Tag Li {posición: relativo; Ancho: 200px; Altura: 50px; Botón de margen: 1px; desbordamiento: oculto;

Transición: altura de 0.5s facilidad; -WebKit-Transition: altura 0.5s facilitan;

-Moz-Transition: altura 0.5s facilidad; -O-transición: altura 0.5s facilitan;}

.Site-Tag Li A {Color: #666; tamaño de fuente: 16px; Font-Weight: Bold; Line-Alcho: 50px;}

.Site-Tag Li I {Display: Block; Altura: 90px; Posición de fondo: centro central;

Opacidad: 0.3; Filtro: alfa (opacidad = 3); /*Establecer transparencia*/

-Webkit-transición: opacidad 0.5 facilidad; /**/

-Webkit-filter: escala de grises (60%); /**/

}

.Site-Tag Li: Hover I {Opacidad: 0.9; -Webkit-filter: escala de grises (0%); Transición: Opacidad 0.5s Facily;}

.tag-tit {display: block; Altura: 100px; Ancho: 700px; Color:#666; tamaño de fuente: 14px;}

.Site-Tag Li .tag-tit {posición: absoluto; arriba: 0px; Izquierda: 10px; Shadow de texto: 1PX 1PX 1PX RGB (0,0,0,0.1);}

A: Hover .tag-tit {Shadow de texto: 1px 1px 1px rgb (0,0,0,0.5);}

Espero que este artículo sea útil para la programación de JavaScript de todos.