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

标签 html css

<分区>

我想创建一种悬停机制,悬停在一个 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/

上一篇:javascript - 我的汉堡包下拉菜单出现在移动设备上 'How it works' 页面的 slider 后面,分页与文本混淆

下一篇:html - 我想在列表标签​​前后添加一条竖线。垂直线前的第一个列表标签不起作用

相关文章:

jquery - 如何使用 css 或 jquery 在焦点上自动隐藏占位符文本?

javascript - HTML 文本溢出省略号检测

html - Div 定位不正确

html - 如何在 R Shiny 中更改框折叠/展开按钮的颜色?

jQuery移动底部空间

html - 在 form 中添加 textarea 使其在 yahoo purecss 中失去响应属性

php - 将 HTML 和 CSS 转换为 DOCX)?

javascript - 忽略 JS 中同一元素的子项上的 mouseenter/mouseout 事件

html - Internet Explorer 11 中流体 flexbox 容器内的元素出现 "overflow: auto"问题

html - 如何忽略 sass 部分文件中的注释?