html - 将鼠标悬停在 Firefox 中的子元素上时

Question

当使用此规则 .parent:hover > .child {/*style*/} 将鼠标悬停在 firefox 中的子元素上时，子元素将被视为不是父元素的一部分，因此没有风格。就像下面的代码片段一样，在 Firefox 中，如果您将鼠标悬停在按钮上，子元素会受到影响，但当 div 悬停时，它不会改变。

但在 chrome 中，将鼠标悬停在父项和子项上会影响子项。 我发现这对我现在正在做的事情很有用，那么有什么方法可以在 Firefox 中实现同样的效果吗？

button {
  position: relative;
}
button:hover > div {
  background-color: #67BDFF;
}
button:hover > div:before {
  content: "SMURF!";
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  top: 10px;
}
button > div {
  position: absolute;
  top: 18px;
  left: 0;
  padding: 40px;
}

<button>
  hover over me and my child will turn smurf
  <div>
    i'll remain smurf if you over over me cus am part of my parent, but not in firefox
  </div>
</button>

Answer 1

<button>元素只允许包含短语内容 ( read more ) - 所以技术上是 <div>不允许在 <button> 内.由于此 HTML 不兼容，您会在每个浏览器中看到不同的行为。

这是一种跨浏览器的方式来执行您的代码试图执行的操作，它在 Firefox 中有效:

button {
  width: 300px;
}
button + div {
  padding: 40px;
  position: relative;
  width: 220px;
}
button:hover + div,
button + div:hover {
  background-color: #67BDFF;
}
button:hover + div:before,
button + div:hover:before {
  content: "SMURF!";
  position: absolute;
  font-weight: bolder;
  font-size: 20px;
  top: 10px;
}

<button>
  hover over me and my child will turn smurf
</button>

<div>
  i'll remain smurf if you over over me cus am part of my parent, but not in firefox
</div>