悬停在孩子身上而不改变父母答案

【问题标题】：Hover on child without changing parent悬停在孩子身上而不改变父母
【发布时间】：2022-12-26 08:33:19
【问题描述】：

悬停在子元素 <button> 上，对父元素 <h2> 没有悬停效果

.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
}

.parent:hover {
  color: orange;
}

span {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent;
  box-shadow: none;
  z-index: 5;
}

span button {
  position: absolute;
  left: 0;
  top: -20px;
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
}

<h2 class="parent">
  Title
  <span class="child">
    <button>+</button>
  </span>
</h2>

【问题讨论】：

您可能需要引入一些 Javascript 来防止冒泡。这是可以接受的吗？
@AHaworth 我想是的。我已经考虑过了。因为没有找到任何 css 的解决方案

标签： html css hover parent-child

【解决方案1】：

这可能会有所帮助

例子

.html

<div class="parent1">
     <div class="child1">
          /*.....*/

.css

.parent1:hover{
 cursor: pointer;
 }

.parent1:hover .child1{
/*......*/
}

sn-p

.parent:hover .child {
/* ... */
}

【讨论】：

【解决方案2】：

添加以下内容：

parent:hover {
  cursor:pointer
}

【讨论】：

通过添加更多关于代码的作用以及它如何帮助 OP 的信息，可以改进您的答案。

【解决方案3】：

这有点棘手。

首先你需要从孩子那里得到父母：

const _parent = document.querySelector('selectorOfParentFromChild')

在您必须在子级上添加课程并在父级上删除之后。你需要做一个子事件：'onMouseOver'。

所以：

[child, parent].forEach(node=>node.addEvenListener('onmouseover', (event)=>{
event.stopPropagation();
const _parent = document.querySelector('selectorOfParentFromChild')

node.classlist.add(wanted)

_parent.classlist.remove(wanted)

})

【讨论】：

【解决方案4】：

以前有人问过这个问题，答案似乎在以下范围内：“css 不能那样做”、“你可能应该重组你的 div”和“这里有一个技巧”。 hover on child without hover effect on parent

现在我没有经验来判断一个需要这样做的结构是否真的不好，但无论哪种情况，现在都有一个直接的解决方案：has()

.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
}

.parent:not(:has(.child:hover)):hover {
  color: orange;
}

span {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent;
  box-shadow: none;
  z-index: 5;
}

span button {
  position: absolute;
  left: 0;
  top: -20px;
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
}

<h2 class="parent">
  Title
  <span class="child">
    <button>+</button>
  </span>
</h2>

这就是那个选择器用英语说的：选择所有元素“.parent”——除了那些有任何子元素“.child”悬停在上面的元素——当它们悬停在上面时。

【讨论】：

【解决方案5】：

您将不得不删除 parent:hover 的 CSS，如果您只想要按钮上的悬停效果，那么父项不应在您的 CSS 中具有悬停效果。

.parent {
  display: block;
  text-align: center;
  font-weight: 700;
  font-size: 31px;
  letter-spacing: normal;
  position: relative;
}

span {
  line-height: unset;
  vertical-align: baseline;
  top: 0;
  left: 0;
  position: absolute;
  color: transparent;
  box-shadow: none;
  z-index: 5;
}

span button {
  position: absolute;
  left: 0;
  top: -20px;
  color: #fff;
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  z-index: 5;
  background: #0085ba !important;
  border-radius: 50%;
  border: 2px solid #fff;
  box-sizing: border-box;
  padding: 3px;
  display: inline-block;
  overflow: hidden;
}

button:hover {
  color: orange;
}

【讨论】：

为什么这会对悬停时发生的事情产生任何影响（颜色变化除外）。父母仍然变成橙色。