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

Answer 1

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

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

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

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

Answer 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;
}

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

2 个答案: