效果图如下:
分析步骤:
-
获取所有li元素 > querySelectorAll,获取到的是伪数组,后期需要遍历
-
添加鼠标进入事件
-
效果
-
使用排他法
-
让当前鼠标进入的元素透明度变为1,让其它的元素的透明度降低---样式操作
-
鼠标移出整个区域,所有元素的透明度还原到1--样式操作
-
html代码如下:
<div class="wrap">
<ul>
<li>
<a href="#"><img src="images/01.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/02.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/03.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/04.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/05.jpg" alt=""/></a>
</li>
<li>
<a href="#"><img src="images/06.jpg" alt=""/></a>
</li>
</ul>
</div>
CSS代码如下:
<style type="text/css">
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
body {
background: #000;
}
.wrap {
margin: 100px auto 0;
width: 630px;
height: 394px;
padding: 10px 0 0 10px;
background: #000;
overflow: hidden;
border: 1px solid #fff;
}
.wrap li {
float: left;
margin: 0 10px 10px 0;
}
.wrap img {
display: block;
border: 0;
}
</style>
JS代码如下:
<script>
// - 获取所有li元素 > querySelectorAll,获取到的是伪数组,后期需要遍历
// - 添加鼠标进入事件
// - 效果
// - 使用排他法
// - 让当前鼠标进入的元素透明度为1,让其它的元素的透明度降低---样式操作
// - 鼠标移出整个区域,所有元素的透明度还原到1--样式操作
let lis = document.querySelectorAll('li')
let wrap = document.querySelector('.wrap')
// 循环遍历绑定事件
lis.forEach(function(ele, index) {
// 为li元素 添加鼠标移入事件
ele.addEventListener('mouseenter', function() {
// 让其它元素的透明度变为0.2
lis.forEach(function(el) {
el.style.opacity = 0.2
})
// 让当前元素的透明度变为1
ele.style.opacity = 1
})
})
// 为整个窗口添加鼠标移出事件
wrap.addEventListener('mouseleave', function() {
lis.forEach(function(el) {
el.style.opacity = 1
})
})
</script>