1、作用于自身
.oneself:hover {
color: #0000ff;
}
<div class='oneself'>作用于自身</div>
2、作用于子元素
.child_element_Box:hover>.child_element {
color: #0000ff;
}
<div class="child_element_Box">
<div class="child_element">作用于子元素</div>
</div>
3、作用于兄弟元素
选择下一个紧挨的兄弟元素
.be_next_to_closely:hover+div {
color: #0000ff;
}
<div>
<div class="be_next_to_closely">选择紧挨的兄弟元素</div>
<div>紧挨着的元素</div>
<div>不是紧挨着的元素</div>
</div>
选择后边所有符合条件的兄弟元素
.all_element:hover~.elements {
color: #0000ff;
}
<div>
<div class="all_element">选择后边所有符合条件的兄弟元素</div>
<div class="elements">符合的元素1</div>
<div>不符合的元素1</div>
<div class="elements">符合的元素2</div>
</div>
4、使用JavaScript配合CSS实现样式修改
.Box {
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</span>
<span class="tab_bar_2">标签2</span>
<span class="tab_bar_3">标签3</span>
</div>
</div>
(function () {
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事件。对应mouSEOutmouseenter
:只有在鼠标指针穿过被选元素时,才会触发mouseenter事件。对应mouseleave
鼠标移出事件
mouSEOut
:不论鼠标指针离开被选元素还是任何子元素,都会触发mouSEOut事件mouseleave
:只有在鼠标指针离开被选元素时,才会触发mouseleave事件
原文地址:https://www.jb51.cc/wenti/3285556.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。