Temporarily disable particular css style from javascript

Question

I have a particularly specific question that there are many articles online but they don't answer my question.

I have a menu bar on my website where some <li> elements appear when the user is logged in. That <li> element also has an onhover dropdown styled in css with the following:

ul li:hover > ul {
    display: block;
}

So what happens is, when the <li> element of the main (which has a direct child of <ul>) is hovered upon, the dropdown will appear. Pretty straightforward.

My problem is, when I hide that particular <li> element with the dropdown attached to it (through the following code within a javascript if statement), the hover style remains.

So even though the parent <li> is set to display: none;, the child dropdown can be revealed by hovering over a tiny invisible rectangle (see picture) in the header.

TLDR: is there a way I can temporarily disable that particular :hover style preferrably through javascript or jQuery?

Thanks for the help in advance.

My HTML code for anyone wondering: (I have removed unncessary stuff so it is easier to see what I mean)

<ul>
    <li>Foo</li>
    <li id="dropdown">
        <p class="drop" id="loggedInValue"></p>
        <ul class="dropdown-content">
            <li><a href="account.php">My Account</a></li>
            <li><a href="login.php?logout=true">Logout</a></li>
        </ul>
    </li>
</ul>

for how long do you want to disable the :hover effect? Could you share your entire html & css file? — Manuel Abascal
– Manuel Abascal, Commented Oct 7, 2019 at 3:52
@ManuelAbascal. I want to disable the :hover effect when the user is logged in. So it would be for any given period of time (depending upon user input). If you're wondering, it is not a time delay event. — Hugs
– Hugs, Commented Oct 7, 2019 at 3:54
I don't understand. An element with display:none will not receive hover events. Can you clarify or elaborate on the problem? — ray
– ray, Commented Oct 7, 2019 at 3:55
When you are setting li to display: none, you can add a class and add :not(class-name) to the css — Jay Jodiwal
– Jay Jodiwal, Commented Oct 7, 2019 at 3:57

Jay Jodiwal · Accepted Answer · 2019-10-07 04:07:31Z

2

When you are setting li to display: none, you can add a class to li (class-name, for example) and add :not(class-name) to the css. See below example for reference

ul li:not(.class-name):hover > ul {
    display: block;
}

P.S: I am wondering how is that little rectangle even visible, when you have set it to display: none. There is definitely some part left out when setting display to none

answered Oct 7, 2019 at 4:07

Jay Jodiwal

1212 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Hugs Over a year ago

Yeah, I realised it's being overridden by another display: inline-block;. So I just added an !important tag on the display: none;. But I will leave this question just incase it is useful to someone else with a similar but slightly different problem.

Jay Jodiwal Over a year ago

Great. But !important is not one of the best practices. I hope you know that

Hugs Over a year ago

I know. I actually had to end up using ray hatfield's solution because of a double !important thing that is too complicated to explain.

ray · Accepted Answer · 2019-10-07 03:57:43Z

1

You could add a logged-in css class to the root html element, and predicate the hover selector on the presence of that class.

const onLoginSuccess = () => {
  document.documentElement.classList.add('logged-in');
}

.logged-in ul li:hover > ul {
    display: block;
}

answered Oct 7, 2019 at 3:57

ray

27.3k5 gold badges31 silver badges30 bronze badges

1 Comment

Hugs Over a year ago

This is a great method. I like your thinking. Let me have a go.

Manuel Gozzi · Accepted Answer · 2019-10-07 03:52:08Z

0

If there should be no drop down then you should run some code similar to this. Please let me know if this helped. Have a good one.

const dropdown = document.querySelector('#dropdown');
dropdown.classList.remove('dropdown-styles');

answered Oct 7, 2019 at 3:52

Manuel Gozzi

216 bronze badges

4 Comments

Manuel Gozzi Over a year ago

maybe try '#dropdown:hover'

Manuel Gozzi Over a year ago

Is there a way you could share a code snippet or fiddle

Hugs Over a year ago

I will try #dropdown:hover and see if it works. As if it does, it is a cleaner solution than Ray's. Although his still works fine.

Hugs Over a year ago

Still didn't work for me. I think the problem is that you've said dropdown.classList.remove('dropdown-styles);` But I don't have any classes on that element. I am simply using relative selection through css.

Manuel Gozzi · Accepted Answer · 2019-10-07 04:12:30Z

0

Maybe you can just completely delete the element from the DOM

const dropdown = document.querySelector('#dropdown');
dropdown.parentNode.removeChild(dropdown);

answered Oct 7, 2019 at 4:12

Manuel Gozzi

216 bronze badges

Collectives™ on Stack Overflow

Temporarily disable particular css style from javascript

4 Answers 4

3 Comments

1 Comment

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related