<分区>
<分区>
我想创建一种悬停机制,悬停在一个 div 上会导致另一个 div 的宽度发生变化,如下所示
HTML
<div id='Slider_1'></div>
<div id='Footer_Holder'></div>
CSS
#Slider_1 {
color: #ffffff;
background-color: blue;
text-align: center;
transition: width 1s ;
width: 0%;
height: 130px;
z-index: 10;
}
#Footer_Holder {
background-color: red;
width: 150px;
height: 150px;
}
#Footer_Holder:hover + #Slider_1 {
width: 100%;
}
代码笔链接 - https://codepen.io/Volabos/pen/dyyMqzy
令人惊讶的是,如果我如下更改 div 的位置,上面的代码就可以工作了 -
你能指导我到我想放的正确方向吗<div id='Slider_1'>
在 <div id='Footer_Holder'></div>
之上
最佳答案
“+”选择器仅在您切换 div 位置时才起作用:
<div id='Footer_Holder'></div>
<div id='Slider_1'></div>
在这里阅读所有关于选择器的信息:https://www.w3schools.com/cssref/css_selectors.asp
关于html - 悬停时更改另一个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58393519/