Question

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

但是在父母和孩子的徘徊中，铬会影响孩子。我觉得这对现在正在进行的工作很有用，那么我有没有办法在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中有效：

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

将鼠标悬停在firefox

1 个答案: