[英]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. 当使用此规则
.parent:hover > .child { /*style*/ }
将.parent:hover > .child { /*style*/ }
在firefox中的子元素上时,子元素将被视为不是父元素的一部分,因此不会设置样式。 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. 就像在下面的代码片段中一样,如果你将鼠标悬停在按钮上,那么子元素会受到影响但是当div被悬停时它不会改变。
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?
我觉得这对现在正在进行的工作很有用,那么我有没有办法在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>
elements are only allowed to contain phrasing content ( read more ) - so technically a <div>
is not allowed to be inside a <button>
. <button>
元素只允许包含短语内容( 阅读更多 ) - 所以从技术上讲, <div>
不允许在<button>
。 Because this HTML is non-compliant, you'll see different behavior in each browser. 由于此HTML不合规,因此您会在每个浏览器中看到不同的行为。
Here's a cross-browser way to do what your code was trying to do, which works in Firefox: 这是一种跨浏览器的方式来执行代码尝试执行的操作,这在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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.