关于html：CSS在悬停时显示另一个元素


CSS On hover show another element

当我将鼠标悬停在div id='a'上时，我想使用CSS来显示div id='b'，但是由于div 'a'在另一个div不在div 'b'的内部而无法解决。铅>

1
2
3
4
5
         Hover me
     


    Show me
相关讨论

我们可以像这样在悬停时显示相同的标签div

1
2
3
4
5
6
7
8
9
10
<style>
#b {
    display: none;
}

#content:hover~#b{
    display: block;
}

</style>
相关讨论

使用以下代码确实可以实现

1
2
3
4
5
     Hover me
 


    Show me

和css

1
2
3
4
5
6
7
8
9
10
11
#a {
  display: block;
}

#a:hover + #b {
  display:block;
}

#b {
  display:none;
  }

现在，将鼠标悬停在元素#a上将显示元素#b。

您可以为此使用斧头选择器。

有两种方法：

1.直接父级轴选择器(<)

1
#a:hover < #content + #b

此斧头样式规则将选择#b，这是#content的直接同级，#content是具有:hover状态的#a的直接父级。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}

#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}

#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}

#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}

#a:hover < #content + #b {
display: inline-block;
}
1
2
3
4
5
6
Hover me


Show me

<script src="https://rouninmedia.github.io/axe/axe.js">

2.远程元素斧选择器(\\)

1
#a:hover \\ #b

此斧头样式规则将选择#b，该文件与状态为:hover的#a存在于同一文档中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
div {
display: inline-block;
margin: 30px;
font-weight: bold;
}

#content {
width: 160px;
height: 160px;
background-color: rgb(255, 0, 0);
}

#a, #b {
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}

#a {
color: rgb(255, 0, 0);
background-color: rgb(255, 255, 0);
cursor: pointer;
}

#b {
display: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 255);
}

#a:hover \\ #b {
display: inline-block;
}
1
2
3
4
5
6
Hover me


Show me

<script src="https://rouninmedia.github.io/axe/axe.js">

相关讨论