0

I'm quite certain I could do this using JS or jQuery, but I'm wondering how to do this using CSS.

I have an element, which I wish to hide on mouse hover. The problem is that whenever the mouse hovers on the element, the element is hidden (so far so good) but if the mouse subsequently moves over the element, it appears not to register the hover on the hidden element, thus not hiding it, followed by registering the hover and hiding it. This result in annoying flashing of the element. As can be seen here

For example, here, I change background color on hover, which works consistently. If I try to

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Mitchell van Zuylen
  • 3,905
  • 4
  • 27
  • 64

1 Answers1

1

the problem is that when an item has visiblity:hidden you cannot 'touch' it anymore. so it isn't there. so, there is nothing to hover on after it is hidden. So when you move the cursor it becomes visible again and immediately invisible ( because of the css style you set on hover ) thus the problem with flickering

you can use opacity:0 instead on hover, the element will be there, you can ' touch ' it but invisible

that's the difference between visibility and opacity 

a {

    color: white;
    background-color: purple;
    padding: 0.2em 0.6em;
    display:block;
}

a:hover {
opacity:0;    }
<a> Hover here </a>
Mihai T
  • 17,254
  • 2
  • 23
  • 32
  • I would intuitively expected 'visibility' to still allow it to be touched. When a physical object is invisible, that wouldn't mean the object does not exist and you would still be able to touch it. I assumed CSS would work along these lines, but now I understand that was a wrong assumption. – Mitchell van Zuylen Apr 28 '17 at 12:40
  • 1
    see here more info about it http://stackoverflow.com/questions/272360/does-opacity0-have-exactly-the-same-effect-as-visibilityhidden/273076#273076 – Mihai T Apr 28 '17 at 12:47