When hovering over a child element in firefox

Question

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.

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>

Answer 1

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

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>