View Full Version : a:hover issue

09-05-2011, 12:50 AM

inline displayed ul -- list items are links with background images, overflows hidden on a display, visible on hover display -- why is the first one making the rest invisible?

09-05-2011, 01:35 AM

Not 100% sure on what you mean by the first one making the rest invisible. Do you mean when you hover over one you cant see the rest of the menu title/images?

Just quickly looking, it seems like you made each of the items in the menu it's own entire background. So you are really only going to see one image at a time so you will only be able to see one of the menu titles (film/stills/outreach..) at a time. Try, rather than using an entire background for each image, just a background image for the text of each menu item.

If you mean that when you try to hover over the next list item and that next item doesnt appear, I think that's because you are changing the width on hover to cover over that area aswell so it will still be :hover for the previous item.

09-05-2011, 02:26 AM
at least with my browser (latest mozilla), the "film" bit of the menu is the only one showing. the 4 others are not being shown. this shouldn't be happening, because the film link has only a 200px width and 44px height. when a:hover is activated, i don't expect to see the other images -- that's OK for now. i just wanted to try an experiment.

isn't the film tab the only one showing for you?

09-05-2011, 02:38 AM
You can’t expect anything to look right if you have errors in your code.
What is this?

<li><a href id="film"=""></a></li>
<li><a href id="stills"=""></a></li>


09-05-2011, 02:52 AM

resolved... issue's still there...

09-05-2011, 03:03 AM
You have a different HTML error now. But anyway, your text is not shown because the background position is wrong. You need to move it on the x axis in a negative direction as much as the sum of the width of all previous list items, i. e. the second one must be -200px horizontally.

09-05-2011, 03:15 AM
made the a href="www.google.com" just to get that out of the way.

i usually just leave it "" because it's a link to the same page and so you can see the anchor function work even though you haven't created the page for where it'll go yet.

as for your suggestion, maybe i did it wrong. it's not working at all.

i toyed with z-indexing a bit and that seemed to work, but only with some menu items and not others.

09-05-2011, 03:21 AM
No, your error is this:

<ul><a href
<li><a href="www.google.com" id="film"></a></li>

How do you get those errors?

And I’m not talking about z-index, I’m talking about the x axis (like in a coordinate system, the horizontal axis). Try the following:

a#stills {
background: url(/jpgs/skye_menu_hover/stills_hover.jpg) -200px bottom no-repeat;
width: 200px;

09-05-2011, 03:26 AM
ah, ok, html error gone there.

tried your suggestion and maybe i did something wrong but that's not working. as i suspected, it just moves each anchor/image over to where the 1st one is supposed to be.

09-05-2011, 03:31 AM
ok, got it. just moved the absolute positions of each item in divisions of 200px from the left as well. the effect that's having on the background image is funky but i think i can work that out. thanks.

09-05-2011, 03:44 AM
i got it, kind of. but it's still really weird. i was hoping i could do this with CSS, but i'll probably just have to do what the first person suggested, which is to just let the hover function stay on the item itself. my friend really wanted something graphical to happen with the water on this picture but that seems unrealistic with only CSS. or are there other ways to do this?

09-05-2011, 03:51 AM
sorry, last post:

i got it! with z-indexing!



except... for some reason i still think it's weird that this didn't happen automatically. i would like to know why. (has nothing to do with my code, i think. more to do with the assumptions of browsers or something. same question i have in the other thread about why float:left is necessary for this kind of menu display.)

is there any way to make it so the mouse stops a:hover when it goes about 44px high?