Hover class not working on a div

Question

I am unable to get the hover class to work on any element within my html document. We are trying to make anyone of the 4 squares to disappear, aka display:none; Here is a demo of my site. Let me know if you can spot what my error is. Thank you in advance!

https://c9.io/riotgear66/day1/workspace/sams/html/index.html

Your inline styles are overwriting your hover styles. – Musa Aug 22 '13 at 01:21 — Musa, Aug 22 '13 at 01:21

score 3 · Accepted Answer · answered Aug 22 '13 at 01:22

3

The problem with trying to hide something when it is hovered is that as soon as it is hidden, it is no longer hovered over and it comes back. So you can't do that.

You could use opacity: 0 instead:

http://jsfiddle.net/bYNmh/

answered Aug 22 '13 at 01:22

James Montagne

77,516
14
110
130

Thank you, that makes perfect sense! – Austin Lovell Aug 22 '13 at 15:27

score 0 · Answer 2 · answered Aug 22 '13 at 01:28

If you set display:none on an element over which you are hovering, you then cannot hover over a nonexistent element. This is what causes the flickering. To do what you would like to do you have to explicitly change the background in the .css for the element.

Hover class not working on a div

2 Answers2