一：突出展示

获取所有li元素 > querySelectorAll,获取到的是伪数组，后期需要遍历
添加鼠标进入事件
效果
- 使用排他法
- 让当前鼠标进入的元素透明度变为1，让其它的元素的透明度降低---样式操作
- 鼠标移出整个区域，所有元素的透明度还原到1--样式操作

// - 添加鼠标进入事件
// - 效果
//   - 使用排他法
//   - 让当前鼠标进入的元素透明度为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
    })
})

Webapi-案例（突出展示）

一：突出展示