Question

我想创建一种悬停机制，将鼠标悬停在一个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>上方的正确方向

Answer 1

只有在切换div位置时，“ +”选择器才起作用：

latlng.toString()

此处阅读了有关选择器的所有信息：https://www.w3schools.com/cssref/css_selectors.asp

悬停时更改另一个元素

1 个答案: