时间戳

首页 > 解决方案 > 在悬停时更改另一个元素

html - 在悬停时更改另一个元素

问题描述

我想创建一个悬停机制，其中悬停在一个 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>

标签： htmlcss

解决方案

好吧，“+”选择器仅在您切换 div 位置时才起作用：

<div id='Footer_Holder'></div>
<div id='Slider_1'></div>

在这里阅读有关选择器的所有信息：https ://www.w3schools.com/cssref/css_selectors.asp

推荐阅读