父级hover控制子级样式
html代码
<div class="div1">
<h1>我是h1 1</h1>
<h1>我是h1 2</h1>
<p>我是无辜的</p>
</div>
css代码
.div1:hover h1{
color:red;
}
效果图
父级hover控制子级样式
兄弟元素hover控制同级元素两种方式
- 用+号控制兄弟元素，但是只能控制一个元素，并且是相邻的后面的兄弟元素
html代码
<div class="div1"></div>
<div class="div2"></div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
css代码
.div1:hover + div{
color:red;
}
效果图
hover控制兄弟元素
- 用~号来控制兄弟元素，可以控制后面的所有兄弟元素，不用是相邻的元素
html代码
<div class="div1"></div>
<div class="div2"></div>
<div>我是div</div>
<p>我是p1</p>
<p>我是p2</p>
css代码
.div1:hover ~ p{
color:red;
}
效果图
用~号来控制兄弟元素.png
如果想要子级hover或者focus控制父级元素的样式，用css是可以控制的，请点击我跳转到：css控制父级元素，或者用js，一般只有input或者textarea等输入框标签才有focus伪类选择器，也有focus、blur事件，但是像div、p等标签是没有的，如果想要加上这种事件，需要在标签上加上
tabindex;
tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）
html代码
<div class="div1">
<h1>我是h1 1</h1>
<h1>我是h1 2</h1>
<p tabindex="1">我是无辜的</p>
</div>
<div class="div2">
<h2>我是h2 1</h2>
<h2>我是h2 2</h2>
</div>
比如说有一个需求，需要第一个div里面的p标签focus的时候，第二个div改变样式，失去焦点的时候，第二个div再恢复原来的样式，如果用点击事件的话，就比较麻烦了，因为还有给document加上点击事件来给第二个div再恢复原来的样式，如果给p标签加上tabindex属性的话，就能用focus和blur事件，就很简单
js代码
const p=document.querySelector("#p");
const div=document.querySelector("#div");
p.addEventListener("focus",()=>{
div.style.border="1px solid red";
});
p.addEventListener("blur",()=>{
div.style.border="none";
});
focus控制父级或者别的元素
