How to Make a Div Disappear on Hover Without It Flickering When The Mouse Moves

How to make a div disappear on hover without it flickering when the mouse moves?

display:none will take the element out of the render tree, so it loses :hover state immediately, then reappears and gets :hover again, disappears, reappears, etc...

What you need is:

#elem { opacity:0; filter:alpha(opacity=0); }

It will leave the place empty, so no flickering will appear. (Demo or yours updated)

hover effect creates flickering

You apply .hover() on the a only. So when you hover the a, the image appear hover your a wich mean you are not hover the a anymore. That will fire the second callback of .hover() and the image will disappear. Then again you are hover the a and it repeat infinitly.

To solve that, you just have to bind the .hover() on the parent container or on both elements.

Show div on hover on same position

It flickers because every time .back becomes visible, hover on .front is no longer valid. To solve for this you can set visibility of .back as visible on .back:hover which can be done by using the same css style for .back:hover as for .front:hover + .back

body { margin: 0;}.row { float: left; width: 100%;}.col { float: left; width: 25%; position: relative; margin: 0 10px 0 0;}.front { width: 100%; height: 300px; background-color: #999}.back { position: absolute; left: 0; top: 0; height: 300px; opacity: 0; visibility: hidden; background-color: #ff0; z-index: 2; width: 100%;}.front:hover + .back,.back:hover { opacity: 1; visibility: visible;}

<div class="row">  <div class="col">    <div class="front">This is front div</div>    <div class="back">This is back div</div>  </div>  <div class="col">    <div class="front">This is front div</div>    <div class="back">This is back div</div>  </div>  <div class="col">    <div class="front">This is front div</div>    <div class="back">This is back div</div>  </div></div>

Avoid flickering on mouse over

Sprites:
Is css-sprite a good technique?

Want to hide div on mouse-over, whilst allowing links behind to be active

This should work:

:hover {
  pointer-events: none;
  visibility: hidden;
}

The reason is that display: none physically removes the element, meaning you are no longer hovering it. Thus, it adds it back, and now, you're hovering it. That's why you get the flickering effect. visibility: hidden on the other hand, keeps the element exactly where it is, so you'll still technically be hovering it.

---

I lied, that is not going to work at all.

Here is a real solution:

HTML

<div class="container">
    <a href="#">Hello</a>

    <div class="overlay"></div>
</div>

CSS

.container {   
    width: 50px;
    height: 50px;
    position: relative;
}

.overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: black;
}

.container:hover .overlay {
    display: none;
}

fiddle: https://jsfiddle.net/zqsn2fym/

How to show a div only on mouse hover and hide when mouse leaves

That's because you have registered the hover on the image that has the class hover and NOT on the div overlay itlself. So only when your mouse leaves that image will that div get hidden.

Try doing as in the following:

$(document).ready(function() {
    $(".hover").on("mouseenter", function() {
       $(".overlay").show();
    });
    $(".overlay").on("mouseleave", function() {
       $(this).hide();  //or $('.overlay').hide()
    });
});

DEMO

Issue with your page detected!

I tried running my own jQuery code on your page and you know what I found?
Your page has many versions of jQuery being loaded and somehow, some older version of jQuery overrides the newer version.

How do I know this?
Running jQuery's .on() method resulted in type errors. As per the documentation, the on() method is added in version 1.7.

Solution: Since I cannot make YOUR page load only the latest jQuery, I tried the above code in an older style, so the following worked:

$(function() {
   $(".hover").mouseenter(function() {
      $(".overlay").show();
   });
   $(".overlay").mouseleave(function() {
      $(this).hide();  //or $('.overlay').hide()
   });
});

Blinking div and mouseover/mouseout events and Prototype?

The mouseout and mouseover events are constantly firing because of the structure of your HTML.

Because you have a <a href> as well as a <img> within the div you are observing the mouseover event is bubbled up from those elements and hits the observer on the div. Also because the cursor is not technically on top of the <div> the mouseout event fires as well.

I put together this http://jsfiddle.net/pkA5n/ and tried it in all the browsers I have available to me on my Windows Desktop (IE10/Chrome/Firefox) and I saw no blinking.

Why doesn't this disappear after hovering?

A simple alternative would be to do something like this:

p:hover {
    opacity: 0;
}

However, that will only work while the hovering it happening. It's won't hide the element once hovering has ceased.

---

Related Topics