使用css：hover在另一张图片上显示图片时出现意外的闪烁效果

Question

I'm trying to create buttons with pixel art images to make a button for a browser game. I succeeded to put two images at the same position but when using .nav_button_activated:hover css code to make the top image transparent, hidden or with lower z-index value, I get what I want but the image quickly appears and disappear as I move the mouse over it. To describe it properly, the flashing effect stops when I stop the mouse on the picture, and the two pictures can be both at the time or on of them hidden. I tried different approaches using CSS only but with the flashing problem. I find my problem nowhere, can you help me please? If not possible with CSS, could you propose a fix with JavaScript?

I tried different techniques I found on Stackoverflow or elsewhere such as this nice example , or Show image over another image on hover but none of them solved the problem. The StackOverflow doesn't work actually. I should add that I work with pixelated picture and that I use the following code

.nav_bar img {  
    transform-origin: top left;
    transform: scale(2);    /* To increase the size of image, use transform: scale() */

    /* remove anti-aliasing */
    image-rendering: optimizeSpeed;             /* STOP SMOOTHING, GIVE ME SPEED  */
    image-rendering: -moz-crisp-edges;          /* Firefox                        */
    image-rendering: -o-crisp-edges;            /* Opera                          */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */
    image-rendering: pixelated; /* Chrome */
    image-rendering: optimize-contrast;         /* CSS3 Proposed                  */
    -ms-interpolation-mode: nearest-neighbor;
}

But It doesn't seems to create the problem.

My html code :

<div class='nav_button'>
<img src="./sprites/genome_button_selected.png"/>
<img class='nav_button_activated' src="./sprites/genome_button.png"/>
</div>

My CSS code (with flash effect I would like to understand and suppress) :

.nav_button {
    position: relative;
    float: right;
    margin-right: 20px;
}

.nav_button img {
    margin-right: 80px;
    margin-left: 30px;
}

.nav_button_activated {
    position: absolute;
    top: 0px;
    right: 0px;
}

.nav_button_activated:hover {
    z-index: -99;
}

I just want to have a nice hover effect, seeing the illuminated title picture only when the mouse hovers it, with no flashing effect. Please, don't forget to explain the origin of the issue, so that I won't do it again.

Answer 1

Problem with the code is when you hover, you move it from under the cursor so it is no longer hovered and it repeats.

So put the hover on the parent

.nav_button:hover .nav_button_activated {
  z-index: -99;
}