can't get css hover to work on link borders

Discussion in 'HTML' started by Greg N., Jun 27, 2005.

  1. Greg N.

    Greg N. Guest

    Hi folks,

    I can't get css hover to work for me. have a look at the tiny test case
    at http://coolhaus.de/misc/test2.htm

    questions:

    1. why does the hover border work on the second link, but not on the
    first? The only difference is, that the first img has a class (for
    image positioning), while the second has no class assigned.

    2. in the second case, where the hover does (sortof) work, why is the
    top hover border missing?

    3. why does the green border as defined in my css, not show?
     
    Greg N., Jun 27, 2005
    #1
    1. Advertisements

  2. Greg N.

    Steve Pugh Guest

    You've floated the first image. Hence visually it is taken out of its
    parent element, the <a> element in this case. The border is applied to
    It's not missing. It's behind the image. The <a> element is only as
    tall as the line height and the image is taller so it spills out the
    top of the <a> and covers the top border. This also explains the gap
    between the bottom of the image and the bottom border in better
    Because you've used a.imga: as the selector. Note the : at the end.

    Steve
     
    Steve Pugh, Jun 27, 2005
    #2
    1. Advertisements

  3. #3
    a.imga: {border:2px solid green; }
    ^
    remove colon, syntax error

    #2
    border applied to link not image, floating image 'pulls' image out of
    link's span. try:

    .left { float:left; }
    a.imga IMG {border:2px solid green; }
    a.imga:hover IMG {border:2px solid red; }

    #1 related to #2, 'float' and which element your applied the border, I
    this the above CSS is what you where looking for
     
    Jonathan N. Little, Jun 27, 2005
    #3
  4. Greg N.

    Greg N. Guest

    I'm with you, the hover should be applied to the <img> rather than the
    <a>. I've been there before:

    http://coolhaus.de/misc/test3.htm

    So why does this work in FF, but not in IE? Well, I guess, a better
    question is: how do I make this work in IE?
     
    Greg N., Jun 27, 2005
    #4
  5. Greg N.

    Greg N. Guest

    I have just (2 minutes ago) fixed a minor error in the sample referred
    above. It does not affect the problem (the problem persists), but I
    thought it's worth mentioning.
     
    Greg N., Jun 27, 2005
    #5
  6. The flippant answer is *'cuz IE sux!*
    But a little testing shows that IE will not support pseudo-class 'hover'
    on links but not on child elements

    a.x { border: 2px solid green; }
    a.x:hover { border: 2px solid red; }

    a.y span{ border: 2px solid green; }
    a.y:hover span{ border: 2px solid red; }

    <p><a href="#" class="x">Test link 1</a></p>
    <p><a href="#" class="y">Test <span>link 2</span></a></p>

    but then again IE does not support 'hover' on non-link elements...

    ..z { border: 2px solid green; }
    ..z:hover { border: 2px solid red; }

    <div class=z>This is a test</div>

    which is the reason a JavaScript hack is required for CSS fly-out menus
    to work on ol' IE!
     
    Jonathan N. Little, Jun 27, 2005
    #6
  7. Greg N.

    Mark Parnell Guest

    Either try and rewrite the page so you *can* apply the :hover to the
    <a>, or use Javascript. Neither is ideal of course. Luckily a border on
    hover is not too important.
     
    Mark Parnell, Jun 28, 2005
    #7
  8. a:hover img {}
     
    Lauri Raittila, Jun 28, 2005
    #8
  9. Nope! IE won't cooperate, you'll have to pin your hopes on IE7! ;-)
     
    Jonathan N. Little, Jun 28, 2005
    #9
  10. This will do what I think you want for both IE and the Geckos...

    .left { float: left; }
    .imga IMG { border: 0; vertical-align: bottom; }
    a.imga { border: 2px solid green; }
    a.imga:hover { border: 2px solid red; }

    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>

    Note: I floated both links, you see what happens if you don't...
     
    Jonathan N. Little, Jun 28, 2005
    #10
  11. Greg N.

    Greg N. Guest

    Lauri, forgive my ignorance, but what is the semantics of that?

    The rule applies when an <img> elements within an <a> is pointed at?
     
    Greg N., Jun 28, 2005
    #11
  12. Greg N.

    Dylan Parry Guest

    Using a pointed stick and pebbles, Greg N. scraped:
    Yes, that's exactly what the above means.
     
    Dylan Parry, Jun 28, 2005
    #12
  13. As noted, don't work in IE, even if I thought it would.
    No, rule will apply to img, that is contained in a that is pointed at. Of
    course, you only see difference, if there is something else than single
    image in link.
     
    Lauri Raittila, Jun 28, 2005
    #13
  14. Greg N.

    Els Guest

    But it /does/ work in IE. I know there are some circumstances in which
    it may not work (I think we discussed this before some time), but in
    most cases it certainly does work in IE. Check the site in my sig and
    hover over thumbnails. You'll see the border change color, which is
    done by the a:hover img{} rule.
     
    Els, Jun 28, 2005
    #14
  15. That was my memory as well...
    I made testcase, and it didn't work. So it seems you might need to do
    some tricks to make it works, and you may just well do them
    accidentally..
     
    Lauri Raittila, Jun 28, 2005
    #15
  16. Greg N.

    Els Guest

    The trick I remember, is that you have to set the styles (colors
    only?) for the regular links too, earlier in the CSS file. Without
    that, it doesn't work on images in IE. (this is from memory though -
    about a year and a half back when I discovered why it worked/didn't
    work)
     
    Els, Jun 28, 2005
    #16
  17. It does *not* work in IE. IE will only recognize the psuedo-class hover
    on *A*s, thats way JavaScript hack are required for CSS fly-out list
    menus to make them work of IE. A way around this for OP is to apply the
    border change to the A tag. This works...

    ..left { float: left; }
    ..imga IMG { border: 0; vertical-align: bottom; }
    a.imga { border: 2px solid green; }
    a.imga:hover { border: 2px solid red; }

    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
    <a class="imga left" href="http://www.google.de"><img
    src="http://coolhaus.de/misc/smily.gif" width=29 height=20></a>
     
    Jonathan N. Little, Jun 28, 2005
    #17
  18. Exactly. That's why I but that it to a, not to img.

    Why not go look for Els' page? Works on my IE6:
    http://locusmeus.com/
    That is because link can't include another link, like menu would need.
    Here we are not trying to make some clueless flyout menu.
     
    Lauri Raittila, Jun 28, 2005
    #18
  19. Greg N.

    Els Guest

    Does too :p
    Correct. the pseudo-class hover /is/ on a, when you apply the style to
    the image inside of it.
    That's a whole different thing. IE does not support :hover on anything
    else than the <a> element, that's true. But it does work to apply
    Yes, that works too, but just to prove to you that IE does understand
    it the way I described, here's a very simple, temporary example:

    http://here.locusmeus.com/temp/doestoo.html

    If you would take out the colour style for a:hover, it wouldn't work.
    I deliberately gave the a:hover style a different colour than the
    borders on the image, so you can be sure it's not the border on the
    <a> element that is changing colour when hovering over the image.
     
    Els, Jun 28, 2005
    #19
  20. The trick was that for IE you have to remove the text decoration on the link

    a:focus,
    a:hover,
    a:active{
    text-decoration:none;
    }
    *WHAT?* Who said anything about nesting links? Of course nesting links
    are invalid, but that had nothing to do with IE not recognizing the
    pseudo-class hover on other elements like *LI* elements that are used in
    CSS fly-out menus made with lists....
     
    Jonathan N. Little, Jun 29, 2005
    #20
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.