Jump to content

z-index and anchor hover together


TheEagle

Recommended Posts

Hi,

 

When I use two divs one above the other using z-index then hover (using the mouse pointer) on the two divs quickly their z-index is lost and they appear one above the other ?! I face this problems in different ways when making JQuery on divs which are one above the other then move the mouse pointer above them quickly.

 

Is there any way to make sure the divs will always be one above the other according to their z-index?

 

Here is an example of my problem.

If you hover the mouse quickly on the window the cover will appear downward and it will looks funny:

http://jsbin.com/ucoru/3

Link to comment
Share on other sites

To be honest, I'm not sure I can help you here -- this is a bit over my head. My impression, however, is that when you move the mouse over the nav item several times very quickly, the effects "build up", rather than canceling any previous effects and then doing the new one. Are you following any tutorial on this, or are you trying to write it yourself?

 

You may want to look at this tutorial: http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/. Although it isn't exactly what you are trying to do, it is pretty close, and it doesn't have the issue that your script has if you mouse your mouse over the item several times quickly.

Link to comment
Share on other sites

Hmm..I think I saw this before when I was in the begining of this idea.

That time (When I saw that example) I wanted to use text in the cover and the covered part but later on I found it impossible (If possible it would be better for SEO) so I forgot about that example thank you for reminding me about it.

 

If they are using text in the covered part and not an image as the cover then they realy did a very great job and I'm going to use their approach.I will check it out and tell you about it.

Thank you for replying to me while no one did for along time :)

Link to comment
Share on other sites

  • 2 weeks later...

To be honest, I'm not sure I can help you here -- this is a bit over my head. My impression, however, is that when you move the mouse over the nav item several times very quickly, the effects "build up", rather than canceling any previous effects and then doing the new one. Are you following any tutorial on this, or are you trying to write it yourself?

 

You may want to look at this tutorial: http://www.gayadesign.com/diy/jquery-convertion-garagedoor-effect-using-javascript/. Although it isn't exactly what you are trying to do, it is pretty close, and it doesn't have the issue that your script has if you mouse your mouse over the item several times quickly.

Yes they use Text in the covered part which is realy what I want but it would be better if the overlay overflow is hidden.I don’t mean in the code I mean in the result.For example when the overlay overflow a top border above the item it will be hidden..like a window or a real garage door.I tried to do it by putting a Div with overflow:hidden around the overlay but it is just ignored by the browser?!!

Link to comment
Share on other sites

If you post a link to your most recent code, I may be able to take a look... can't promise any solutions though. :unsure:

Well I didn't upload that one on the internet because I didn't make any effort on that one.It is exactly the same code in the link you gave me.I just tried by adding a DIV around the overlay DIV to hide the overflow but nothing happened at all.So you can try on the code in the same link you provided before if my goal is already clear for you.Hope more success for both of us...

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...