将鼠标悬停在Firefox中的子元素上时 [英] When hovering over a child element in firefox

问题描述

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

When hovering over a child element in firefox using this rule .parent:hover > .child { /*style*/ }, the child element is treated as not part of the parent element and therefore not styled. like in the snippet below, in firefox if you hover over the button, the child element is affected but when the div is hovered it will not changed.

但是在chrome中，将鼠标悬停在父母和孩子身上会影响孩子. 我发现这对当前正在研究的内容很有用，所以有什么方法可以在firefox中实现相同的效果?

But in chrome hovering over the parent and child will affect the child. I find this useful to what am working on right now, so is there a way I can achieve the same effect in 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>

推荐答案

<button>元素仅包含措词内容(

<button> elements are only allowed to contain phrasing content (read more) - so technically a <div> is not allowed to be inside a <button>. Because this HTML is non-compliant, you'll see different behavior in each browser.

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

Here's a cross-browser way to do what your code was trying to do, which works in 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>

这篇关于将鼠标悬停在Firefox中的子元素上时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！