-1

I've been doing my homework and it appears you can't use the CSS transition effect where you're using display:none; and display:inline; and so on.

I'm wanting to add a fade in and out on hover to my CSS dropdown menu to make it look cleaner. This isn't possible when using the display element as I've discovered.

I tried removing display from my CSS but when I do this the element is there (despite not being visible) and fades in when you hover over it. I read a suggestion to add "pointer-events:none;" to this, which isn't cross browser compatible. It also causes the fading element to flicker if you run your mouse over it again.

I also used a CSS keyframes animation suggestion to fade in whilst using the display element, but couldn't get this to fade out when the mouse leaves. :(

I know this is possible because I've seen it on many websites but I just can't get it working right for mine.

Here's my code:

http://pastebin.com/zVQapUNz

BartoszKP
  • 34,786
  • 15
  • 102
  • 130
MattBoothDev
  • 1,294
  • 2
  • 15
  • 25
  • most websites uses jquery or similar javascript for effects. Some effects will only work on blocks, have you tried inline-block? – Ekim Jun 15 '12 at 18:25
  • I did try that yes... same effect. The only thing that causes the transitions to work is to remove the display element from it entirely. But in this case the menu items are simply invisible and not well hidden. – MattBoothDev Jun 15 '12 at 18:34

1 Answers1

1

I've written your code in jsfiddle.net

http://jsfiddle.net/3PD7D/1/

this does work when the mouse moves over it, you can use the same concept to change the opacity 

from {opacity:1;}
to {opacity:0;}

to hide the menu. However this will make it transparent any thing behind would be visible but not clickable. I've not tried what would happen if you add the display:none to the end animation frame.

Ekim
  • 1,105
  • 11
  • 28
  • jsfiddle! I was looking for that to post my code but couldn't remember the name. That's currently the solution I have in place on the site, but it doesn't work with IE9, nor does reversing those values cause a fade out :( – MattBoothDev Jun 15 '12 at 18:39
  • as you can see here: http://jsfiddle.net/kQ3J2/ reversing it doesn't fade out... unless I'm doing it wrong? (I'm new to animations) – MattBoothDev Jun 15 '12 at 18:48
  • http://jsfiddle.net/kQ3J2/3/ if you add from {opacity:1;} to {opacity:0; visibility: hidden; display: none;} add the next set of styles into the target when hiding it works. However the problem is that once the user hovers over the menu itself the fade out will begin. I can't think of a way to prevent that without using jquery. – Ekim Jun 15 '12 at 22:33
  • jQuery isn't my strong point. I've been trying to hack together that kind of method using other peoples code and modifying it to suit my needs but it never works for me :( – MattBoothDev Jun 16 '12 at 13:09