gpt4 book ai didi

html - JS : not able to understand behaviour of hover css selector

转载 作者:太空宇宙 更新时间:2023-11-03 22:48:42 26 4
gpt4 key购买 nike

当我将鼠标悬停在 class top_bottom_b1 的元素上时,class top_bottom_b2 的元素必须隐藏。我需要使用 css 选择器来实现这一点。我不确定为什么下面的代码不起作用。

.top_bottom_b1{
display: block;
width:50px;
height:50px;
background-color:red;
}
.top_bottom_b2{
display: block;
width:50px;
height:50px;
background-color:yellow;
top: 8px;
}
.top_bottom_b1:hover .top_bottom_b2{
display: none;
}
<body>
<div class="top_bottom_b1"></div>
<div class="top_bottom_b2"></div>
</body>

编辑:

即使 之间有多个元素(如下所示),css 选择器(悬停)也应该起作用。

<div class="top_bottom_b1"></div>
<div></div>
<div></div>
<div></div>
... <!-- N number of divs -->
<div class="top_bottom_b2"></div>

最佳答案

使用 adjacent sibling selector + 或者如果他们不是导演 sibling 使用 general sibling selectors - ~:

.top_bottom_b1 {
display: block;
width: 50px;
height: 50px;
background-color: red;
}
.top_bottom_b2 {
display: block;
width: 50px;
height: 50px;
background-color: yellow;
top: 8px;
}
div > .top_bottom_b2 {
background: blue;
}
.top_bottom_b1:hover ~ .top_bottom_b2 {
display: none;
}
.top_bottom_b1:hover ~ div > .top_bottom_b2 {
display: none;
}
<div class="top_bottom_b1"></div>

<div>I'm in the middle</div>

<div class="top_bottom_b2"></div>

<div>
<div class="top_bottom_b2"></div>
</div>

关于html - JS : not able to understand behaviour of hover css selector,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41086241/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com