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>
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.
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.
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.
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With