指针事件：在以前的指针事件之后都没有启用元素可点击性：无

Posted 2023-02-24

【中文标题】指针事件：在以前的指针事件之后都没有启用元素可点击性：无

【英文标题】：pointer-events: all not enabling element clickability after former pointer-events: none

【发布时间】：2021-03-21 17:49:28

【问题描述】：

我在 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，然后将其设置为所有不起作用的指针。指针事件属性还有其他替代方法吗？我很乐意改用它。感谢您的帮助

【参考方案1】：

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

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

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

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

【讨论】：

感谢您的回答！我基本上试图建立一个下拉菜单。当不透明度为 0 时，我不希望点击事件起作用。这样用户只能在下拉菜单出现时点击东西。这是否有意义或有任何其他方法可以做到这一点？

只需设置 visibility: hidden; 并在更改不透明度的同时转换该属性。

【参考方案2】：

我无法发表评论，但 Nathan Dawsons 的评论有效。而不是使用 pointer-events:none 然后尝试在焦点或悬停时激活它对我不起作用。

我更改为可见性：在 :focus 上可见，它起作用了

.dropdown-content
  visibility: hidden;


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