[英]react not allowing two css : focus selectors on one jsx element
i have a react script with a particular element that i would like to have more than one:focus-within selector for in css, however for some reason when i focus on the element only one of the focus selecctors are expressed the dropdown
one, this is the code react js:我有一个带有特定元素的反应脚本,我希望有多个:ZC7A628CBA22E28EB17B5F5C6AE2A266AZ 中的焦点选择器,但是由于某种原因,当我专注于元素时,只有一个焦点选择器表示dropdown
一个,这个是代码反应js:
return (
<div>
<div className="blind"></div>
<div className="menufocus" tabIndex={0}>
<div className="menuicon">
<FontAwesomeIcon icon={solid("bars")} />
</div>
<div className="dropdown">
<div className="dropitem">HOME</div>
<div className="dropitem">ABOUT</div>
<div className="dropitem">NEWS</div>
<div className="dropitem">ICONHOLDERS</div>
</div>
</div>
</div>
);
css: ZC7A628CBA22E28EB17B5F5C6AE2A266AZ:
display: flex;
align-items: flex-end;
width: fit-content;
height: fit-content;
max-height: 1vh;
transition: max-height 1s;
overflow: hidden;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
justify-content: flex-start;
color: white;
}
.blind {
z-index: 1001;
opacity: 0.7;
width: 100vw;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
background-color: black;
display: none;
transition: all 1s;
}
.menufocus {
z-index: 1002;
position: absolute;
top: 0px;
right: 0px;
display: flex;
justify-content: flex-start;
flex-direction: column;
flex-wrap: nowrap;
align-content: flex-end;
align-items: flex-end;
width: fit-content;
height: fit-content;
}
.menufocus:focus-within .dropdown {
max-height: 18vh;
}
.menufocus:focus-within .blind {
display: block;
}
thanks谢谢
Due to the official documentation :由于 官方文档:
The:focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. The:focus-within CSS 伪类匹配一个元素,如果该元素或其任何后代被聚焦。 In other words, it represents an element that is itself matched by the:focus pseudo-class or has a descendant that is matched by:focus.换句话说,它表示一个元素本身与:focus 伪类匹配或具有与:focus 匹配的后代。 (This includes descendants in shadow trees.) (这包括影子树的后代。)
To sum up, .menufocus
node is looking ONLY for its children to be focused, and your .blind
is a signing to it.总而言之, .menufocus
节点只寻找它的孩子被关注,而你的.blind
是对它的签名。 Just make it to be a child of the .menufocus
.只需让它成为.menufocus
的孩子。
ok im back, the menu closed then when you focus on the burger(the 3 bars) the result should look like this with the blur being evident in the background好的,我回来了,菜单关闭,然后当您专注于汉堡(3 个酒吧)时,结果应该看起来像这样,背景中的模糊很明显
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.