Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 12 of 12

Thread: a:hover issue

  1. #1
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post

    a:hover issue

    http://professorcuddlecore.com/about/skye3.html

    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?
    Last edited by mlg5454; 09-04-2011 at 11:54 PM.

  • #2
    New Coder
    Join Date
    Aug 2011
    Posts
    23
    Thanks
    0
    Thanked 2 Times in 2 Posts
    Hi,

    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.

  • #3
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    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?

  • #4
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    You can’t expect anything to look right if you have errors in your code.
    What is this?
    Code:
    <ul>
    <li><a href id="film"=""></a></li>
    <li><a href id="stills"=""></a></li>
    …
    …
    </ul>

  • #5
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    thanks!

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

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    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.

  • #7
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,666
    Thanks
    6
    Thanked 1,006 Times in 979 Posts
    No, your error is this:
    Code:
    <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:
    Code:
    a#stills {
      background: url(/jpgs/skye_menu_hover/stills_hover.jpg) -200px bottom no-repeat;
      width: 200px;
      …

  • #9
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.

  • #10
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    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.
    Last edited by mlg5454; 09-05-2011 at 02:33 AM.

  • #11
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    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?

  • #12
    New Coder
    Join Date
    Oct 2007
    Posts
    49
    Thanks
    2
    Thanked 1 Time in 1 Post
    sorry, last post:

    i got it! with z-indexing!

    Code:
    a
     {z-index:2}
    a:hover
     {z-index:1}
    cool.

    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?


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •