指针事件:在以前的指针事件之后，所有未启用元素可点击性:无

Question

我在CSS类中的html元素上将指针事件设置为none，稍后当元素悬停但不工作时，我将其设置为all。

这是的代码

<nav class="myNav">
<div class="dropdown">
<div>
<h4 class="logo">CARRENTAL</h4>
</div>
<div class="account-sec">
<button class="user_id">CURRENT USER</button>
<ul>
<li><a href="https://www.some_location">MY SITE</a></li>
<li><a href="https://www.some_location">THEMATICS</a></li>
</ul>
</div>
<div class="users-sec">
<button>USERS</button>
<ul>
<li><a href="https://www.all_users">ALL</a></li>
<li><a href="#">CUSTOMERS</a></li>
<li><a href="#">NON CUSTOMERS</a></li>
</ul>
</div>
<div class="cars-sec">
<button>CARS</button>
<ul>
<li><a href="https://www.cars">CARS LIS</a></li>
<li><a href="#">ADD CAR</a></li>
</ul>
</div>
<button><a href="https://www.home" class="home">HOME</a></button>
</div>

这是我的css代码

.account-sec ul,
.users-sec ul,
.cars-sec ul {
position: absolute;
background: #885E5E;
margin-top: 40px;
width: 200px;
height: 150px;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all 0.6s ease;
}
.account-sec a,
.cars-sec a,
.users-sec a {
color: white;
text-decoration: none;
}
.dropdown button,
.home {
background: none;
border: none;
color: white;
text-decoration: none;
font-size: 18px;
cursor: pointer;
}
.account-sec button:focus + ul,
.users-sec button:focus + ul ,
.cars-sec button:focus + ul {
opacity: 1;
pointer-events: all;
transform: translateY(0px);
}

所以在代码中，我首先将指针avents设置为none，然后将其设置为all，这就不起作用了。指针事件属性还有其他替代方案吗？我很乐意用它来代替。感谢您帮助

Answer 1

一旦将元素设置为pointer-events: none，就无法触发:hover。那将是一个指针事件。

您可以将:hover放在父元素上，例如

.parent:hover .child {
pointer-events: auto;
}

我真的不确定这样做的目的是什么。一旦pointer-events关闭，悬停时将其重新打开似乎会使规则变得多余。

Answer 2

我不能发表评论，但Nathan Dawsons的评论是有效的。没有使用指针事件：没有，然后试图在焦点或悬停时激活它对我来说不起作用

我改为visibility：visible on：focus，它在上工作

.dropdown-content{
visibility: hidden;
}
/* The '+' operator adds the written css to the chosen class */
.dropdown-btn:focus + .dropdown-content {
visibility: visible;
}