CSS之hover的使用和鼠标移入移出事件的区别、addEventListener、mouseenter、mouseleave、querySelector、split、+、~

1、作用于自身

.oneself:hover { color: #0000ff; } 

<div class='oneself'>作用于自身 color: #0000ff; } 

<div class="child_element_box"> <div class="child_element">作用于子元素 color: #0000ff; } 

<div> <div class="be_next_to_closely">选择紧挨的兄弟元素 color: #0000ff; } 

<div> <div class="all_element">选择后边所有符合条件的兄弟元素 width: 100%; height: calc(100vh - 17px); background-image: url('./img/by01.jpg'); } .tab_bar_box { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); } .tab_bar_box>span { display: inline-block; width: 130px; border: 1px solid #777777; border-radius: 7px; padding: 7px; margin: 0; text-align: center; cursor: pointer; background-color: #eeeeee; opacity: .3; } .tab_bar_box>span:nth-child(2) { margin: 0 68px; } .tab_bar_1:hover,
.tab_bar_2:hover,
.tab_bar_3:hover { color: #0000ff; font-weight: 700; border: 1px solid #0000ff; opacity: .7; } 

<div class="box"> <div class="tab_bar_box"> <span class="tab_bar_1">标签1 let tabBar1 = document.querySelector('.tab_bar_1'), tabBar2 = document.querySelector('.tab_bar_2'), tabBar3 = document.querySelector('.tab_bar_3'), box = document.querySelector('.box'); tabBar1.addEventListener("mouseenter", mouseenter, false); tabBar1.addEventListener("mouseleave", mouseleave, false); tabBar2.addEventListener("mouseenter", mouseenter, false); tabBar2.addEventListener("mouseleave", mouseleave, false); tabBar3.addEventListener("mouseenter", mouseenter, false); tabBar3.addEventListener("mouseleave", mouseleave, false); function mouseenter(e) { let indexArr = e.target.className.split('_'), i = indexArr[indexArr.length - 1], arr = ["url('./img/by07.jpg')", "url('./img/by09.jpg')", "url('./img/by12.jpg')"]; box.style.backgroundImage = arr[i - 1]; box.style.transitionDuration = '.7s'; } function mouseleave() { box.style.backgroundImage = `url('./img/by01.jpg')`; box.style.transitionDuration = '.7s'; } })(); 

5、鼠标移入移出事件的区别

移入事件

mouseover：不论鼠标指针穿过被选元素或其子元素，都会触发mouseover事件。对应mouseout mouseenter：只有在鼠标指针穿过被选元素时，才会触发mouseenter事件。对应mouseleave

鼠标移出事件

mouseout：不论鼠标指针离开被选元素还是任何子元素，都会触发mouseout事件 mouseleave：只有在鼠标指针离开被选元素时，才会触发mouseleave事件