В этой статье описывается метод серфинга слоя маски в мыши JS. Поделитесь этим для вашей ссылки. Конкретный метод реализации следующим образом:
HTML -код страницы:
Скопируйте код следующим образом: <ul>
<li> <a data-title = "science" href = "#"> <i style = "founal-image: url (image/xiaozhan/main_ojls_1aa6000200891260.jpg)">
</i> <pan> Science </span> </a> </li>
<li> <a data-title = "animation" href = "#"> <i style = "background-image: url (image/xiaozhan/main_nh8v_2e310001ebd1118e.jpg)">
</i> <pan> аниме </span> </a> </li>
<li> <a data-title = "life" href = "#"> <i style = "background-image: url (image/xiaozhan/main_otnr_43a60000050a118c.jpg)">
</i> <pan> Life </span> </a> </li>
<li> <a data-title = "иллюстрация" href = "#"> <i style = "founal-image: url (image/xiaozhan/main_ud3z_2e510002074f118e.jpg)">
</i> <pan> иллюстрация </span> </a> </li>
<li> <a data-title = "music" href = "#"> <i style = "background-image: url (image/xiaozhan/main_krfk_6323000018bd125d.jpg)">
</i> <pan> музыка </span> </a> </li>
<li> <a data-title = "artitude" href = "#"> <i style = "founal-image: url (image/xiaozhan/main_uabs_764f0001ff601190.jpg)">
</i> <pan> естественный </span> </a> </li>
</ul>
JS -код:
Скопируйте код следующим образом: <script type = "text/javascript">
$ (function () {
// слой маски, высота изменяется, когда мышь поднимается и становится более ясным
var $ site_li = $ (". Site-tag li");
$ site_li.hover (function () {
var indexs = $ site_li.index (это);
$ (this) .css («высота», «90»). Найти (".. Tag-Tit"). CSS ("top", "30"). CSS ("Color", "#ffff");
// Получить индекс текущего элемента Click LI во всех элементах LI
// предупреждение (индексы+1);
$ (this) .prev (). css ("высота", "30");
$ (this) .next (). CSS («высота», «30»);
}, function () {
$ site_li.css («высота», "50");
});
});
</script>
CSS -код:
Скопируйте код следующим образом: ul li {list-style: none;}
.site-tag {ширина: 200px; переполнение: скрыто; z-index: 5;}
.site-tag li {позиция: относительно; Ширина: 200px; Высота: 50px; маржинальный бат: 1px; переполнение: скрыто;
Переход: высота 0,5 с легкостью; -Вобкит-трансляция: высота 0,5 с легкостью;
-Моз-трансляция: высота 0,5 с легкостью; -О-транзиция: высота 0,5 с легкостью;}
.site-tag li a {color: #666; размер шрифта: 16px; Font-Weight: Bold; Line-Hight: 50px;}
.site-tag li i {display: block; Высота: 90px; Справочная позиция: центр;
непрозрачность: 0,3; Фильтр: альфа (непрозрачность = 3); /*Установить прозрачность*/
-Вобкит-трансляция: непрозрачность 0,5 легкость; /**/
-Webkit-Filter: Greyscale (60%); /**/
}
.site-tag li: Hover i {непрозрачность: 0,9; -Webkit-Filter: Greyscale (0%); Переход: непрозрачность 0,5 с легкостью;}
.tag-tit {display: block; высота: 100px; Ширина: 700px; Цвет:#666; размер шрифта: 14px;}
.site-tag li .tag-tit {позиция: абсолют; Верх: 0px; Слева: 10px; Текстовая тень: 1px 1px 1px rgb (0,0,0,0,1);}
A: Hover .tag-tit {Text-Shadow: 1px 1px 1px rgb (0,0,0,0,5);}
Я надеюсь, что эта статья будет полезна для каждого программирования JavaScript.