Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

When hovering over a child element in firefox

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>
like image 350
Eddie Dane Avatar asked Dec 18 '16 16:12

Eddie Dane


People also ask

How can we prevent child element affected by parents hover state?

Basically you want to apply a negative scale on hover. so you apply the positive scale to the parent div and a negative scale to the child.

How do you know if an element is hovered?

You can simply use the CSS :hover pseudo-class selector in combination with the jQuery mousemove() to check whether the mouse is over an element or not in jQuery. The jQuery code in the following example will display a hint message on the web page when you place or remove the mouse pointer over the DIV element's box.

Why is my hover CSS not working?

Also, hover will not work if you use the wrong CSS format. Note that if you do not get the specificity right, the hover style will not work.


1 Answers

<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>
like image 79
Jon Uleis Avatar answered Oct 16 '22 07:10

Jon Uleis