CODEWITHSUNDEEP
javascriptjqueryhover
cachess
cachess

Reputation: 203

remove blinking on my hover image

To be simple I added a jquery function that allow me to insert an element to add an image to the menu:

$('.menu-item').append('<div class="hover--state"><img src="http://myway-hannover.de/wp-content/uploads/2018/01/hover-state-menu.png" /> </div>');

When the append is done this will be the layout of my menu.

    <li class="menu-item">
        <a href="#">Home</a>
        <div class="hover--state">
           <img src="http://myway-hannover.de/wp-content/uploads/2018/01/hover-state-menu.png">
        </div>
    </li>

My css code for hovering: 

#top-menu-nav > ul > li > a:hover + div{
     display: block;
}

The image that I append its a shadow image of a menu when the state is on hover, so every time when the state is hover the image will be displayed which I added a display: block and when there is no hovering happen the image will be display: none.

The hover state are already done but there is a blingking every hover that I made. You can check the blinking hover on this link http://myway-hannover.de/

Upvotes: 0

Views: 112

Answers (1)

feihcsim
feihcsim

Reputation: 1552

The problem isn't with your jQuery function - this is a CSS issue.

What's happening right now is, when the hover state is activated, it covers the <a> element, which then deactivates the hover state. You want to make sure the hover state remains activated when the shadow image is present. You can do this by moving the hover detection onto the <li> level like this:

change

#top-menu-nav > ul > li > a:hover + div {
  ...
}

to

#top-menu-nav > ul > li:hover > .hover--state {
  ...
}

Upvotes: 1

Related Questions