如何在悬停效果上更改 div 元素内部的背景颜色？

Posted 2023-03-06

【中文标题】如何在悬停效果上更改 div 元素内部的背景颜色？

【英文标题】：how to change background color inside element of div on hover effect?

【发布时间】：2018-12-04 03:21:23

【问题描述】：

悬停“.parent”并更改其背景颜色（工作）。 悬停“.child”并更改其背景颜色（工作）。 我想悬停 '.child' 并且只更改 .child 背景颜色？我是怎么做到的？

.parent 
  background-color: #cde;
  width: 100%;
  position: relative;
  height: 100px;


.parent:hover 
  background-color: black;


.child 
  float: right;
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  background-color: #ff0000;


.child:hover 
  background-color: yellow;

<div class="parent">

  <span class="child">
		Click
	</span>

</div>

【问题讨论】：

这是不可能的，悬停子级总是意味着悬停父级。实现这一点的唯一方法是将“孩子”放在 DOM 树中的“父母”之外。

【参考方案1】：

一个技巧是在悬停时使用子元素创建另一个层以模拟父背景的不变。

这是box-shadow (On hover of child, change background color of parent container (CSS only)) 的示例

.parent 
  background-color: #cde;
  width: 100%;
  height: 100px;
  position: relative;
  overflow:hidden;


.parent:hover 
  background-color: black;


.child 
  position: absolute;
  left: 50%;
  top: 50%;
  padding: 10px;
  background-color: #ff0000;


.child:hover 
  background-color: yellow;
  box-shadow:0 0 0 1000px #cde;

<div class="parent">

  <span class="child">
		Click
	</span>
</div>