这会很有帮助
范例
. html格式

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

. css格式

.parent1:hover{
 cursor: pointer;
 }

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

片段

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

增加以下内容：

parent:hover {
  cursor:pointer
}

有点棘手。
首先，您需要从子对象获取父对象：

const _parent = document.querySelector('selectorOfParentFromChild')

在你必须在child上添加类并在parent上删除类之后，你需要在一个子事件上完成："鼠标悬停"。
销售代表：

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

node.classlist.add(wanted)

_parent.classlist.remove(wanted)

})

以前有人问过这个问题，答案似乎在以下范围内："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"被悬停的元素-当它们被悬停时。

你必须删除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;
}