pointer-events: all not enabling element clickability after former pointer-events: none

user_13376356 0
Viewed 1551

I set pointer events to none on an html element in CSS class and later on I set it to all when the element is hovered but it's not working.

Here are the codes

<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>

Here is my css codes

.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);
}

So in the code I first set the pointer avents to none and after I set it to all which is not working. Is there any other alternatives to the pointer-events property ? I'd be glad to use it instead. Thanks for helping

pointer-events css html javascript
2 Answers

Once you set the element to pointer-events: none, you can't trigger :hover. That would be a pointer event.

You could put the :hover on the parent element, e.g.

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

I'm really not sure what the purpose of that would be though. Once pointer-events are off, switching them back on when hovering seems like it would make the rule redundant.

user_13109290

I can't comment, but Nathan Dawsons comment works. Instead of using pointer-events:none and then trying to activate it on focus or hover did not work for me.

I changed to visibility: visible on :focus, and it worked

.dropdown-content{
  visibility: hidden;
}

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

user_123203500
Related