HTML/CSS 悬停一个对象使另一个对象改变它的属性

标签 html css

<分区>

你好,谢谢大家看一看我的问题:这是我的问题:

#div1 {
  background: red;
  width: 200px;
  height: 200px;
}

#div2 {
  background: blue;
  width: 200px;
  height: 200px;
}
<div id="div1"></div>
<div id="div2"></div>

现在我想通过悬停 div1 将 div2 的背景更改为绿色,我该怎么做才能仅使用 css?

更新:我有同样的问题,但另一个故事:

--HTML--

<div id="div1"></div>

<div id="wrapper">
<div id="div2"></div>
</div>

--HTML--

--CSS--

#div1 {
      background: red;
      width: 200px;
      height: 200px;
    }

    #div2 {
      background: blue;
      width: 200px;
      height: 200px;
    }

    #wrapper{
      width:500px;
      height:500px;
    }

--CSS--

如图:

#div1:hover + #wrapper #div2{
background:green;}

不知道为什么#div1:hover + #div2 不起作用

最佳答案

您可以使用 + css 选择器来实现,它直接选择当前元素之后的元素

div {
  height: 50px;
  width: 50px;
  border: 1px solid black;
}

#div1:hover+#div2 {
  background-color: green;
}
<div id="div1"></div>
<div id="div2"></div>

关于HTML/CSS 悬停一个对象使另一个对象改变它的属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52387628/

上一篇:html - 如何为内容设置仅可滚动的 div?

下一篇:javascript - 已设置位置,但 z-index 无效

相关文章:

javascript - 如何在悬停时为背景图像设置动画?

javascript - 如何更改 JS 中的子元素顺序?

html - WordPress 评论表

asp.net - 我可以在我的 html 文件中放置什么元标记,以便它自动在 Microsoft Word 中打开该页面?

javascript - 在网页上使用 CMYK

css - 如何从我的网站 html 中删除空白区域

html - 为什么 adsense 和输入组之间没有垂直空间?

html - 优化下拉菜单的外观 (CSS)

css - 使文本响应于图像下方

html - 如何使用 CSS 将 <label> 放在 ASP.Net 中的文本框控件上?