我正在尝试创建一个移动垂直下拉菜单,但是在同时使用:focus
来显示子菜单的项目时遇到了问题。
我找到了一种解决方法,将:focus
用于子菜单,并将:focus-within
用于其项目。
此解决方案有效,并且仅在其他浏览器(如Samsung Internet和UC浏览器)未显示子菜单的:focus
时显示Google Chrome的子菜单项。
我通过同时使用:hover
找到了另一个解决方案,并且该解决方案适用于几乎所有浏览器。
我有两个问题:
:focus
?使用的CSS:
.main-nav a {
color:black;
display: block;
padding: 10px 3px 10px 3px;
font-size: 20px;
text-align: center;
font-family: 'hayah';
border-radius: 25px;
transition: border-radius 0.2s ease-in;
}
.main-nav a:hover {
background:#D7D7D7;
border-radius:25px 25px 0 0;
-webkit-transition: border-radius 0.1s ease-in;
-moz-transition: border-radius 0.1s ease-in;
-o-transition: border-radius 0.1s ease-in;
transition: border-radius 0.1s ease-in;
display: block;
}
.main-nav-ul ul {
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
opacity: 0;
max-height: 0;
overflow: hidden;
background-color: #D9D9D9;
color: black;
margin-bottom: 10px;
margin-top: 5px;
border-radius: 0 0 25px 25px;
font-size: 12px;
}
.main-nav-ul li:hover ul {
opacity: 1 !important;
max-height: 400px !important;
color: black;
background-color: #E2E2E2;
display: block;
}
答案 0 :(得分:0)
在不了解如何实现HTML的情况下很难知道哪种答案最适合这种情况。 :focus-within
的支持不太好:https://caniuse.com/#search=focus-within。我什么也没看到,我想也许您会使用JS来添加和删除:hover
/ :focus
,就像这样的答案:Can I disable a CSS :hover effect via JavaScript?。这样,当您不显示子项时,您将无法使用其悬停效果。