<
meta
charset
="UTF-8"
>
<
meta
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
<
meta
http-equiv
="X-UA-Compatible"
content
="ie=edge"
>
<
title
>
Document
</
title
>
<
style
>
.father_div
{}
.child_div
{
width
:
50px
;
height
:
50px
;
background-color
:
yellow
;
display
:
none
;
.father_div:hover .child_div
{
display
:
block
;
</
style
>
<
style
>
.second_div
{
width
:
50px
;
height
:
50px
;
background-color
:
yellowgreen
;
display
:
none
;
.first_div:hover+.second_div
{
display
:
block
;
</
style
>
<
style
>
.second2_div
{
width
:
50px
;
height
:
50px
;
background-color
:
yellowgreen
;
display
:
none
;
.first2_div:hover+div+div+.second2_div
{
display
:
block
;
</
style
>
</
head
>
<
div
class
="father_div"
>
子元素的显示隐藏(鼠标移动至子元素div不消失)
<
div
class
="child_div"
></
div
>
</
div
>
<
p
></
p
>
<
div
class
="first_div"
>
相邻的下一个兄弟元素的显示隐藏
</
div
>
<
div
class
="second_div"
></
div
>
</
div
>
<
p
></
p
>
<
div
class
="first2_div"
>
不相邻的兄弟元素的显示隐藏(2)
</
div
>
<
div
></
div
>
<
div
></
div
>
<
div
class
="second2_div"
></
div
>
</
div
>
</
body
>
</
html
>
控制元素显示隐藏，且不消失，可以使用父元素选择器：hover 子元素选择器（需要显示隐藏的元素）
控制兄弟元素的隐藏展示，用+选择器就可以,+号只能选择相邻的兄弟元素，需要选择所有的兄弟元素用~兄弟元素选择器
