CSS Troubles

Discussion in 'HTML' started by jamie_cockburn, Jul 31, 2006.

  1. Hi,

    I'm not sure if this is possible, but here goes...

    I want some sort of area (div preferably, td otherwise) that when
    moused over, changes it's style (bgcolor) and is also a link, as in,
    the whole area is a link, not just the text inside. I'd like this to
    work in both IE and Firefox, and preferably without
    any javascript.

    Anyone got any clues, cause I've been trying all day with no avail.

    The Windows Live Mail (beta) thing, does this exactly in it's side
    menu, but the code it's self is beyond me. The menu item's themselves
    have the class HoverItem, but searching through the three stylesheets
    linked to the page, I cannot find one mention of 'HoverItem'. Can
    anyone explain this?

    Jamie
     
    jamie_cockburn, Jul 31, 2006
    #1
    1. Advertisements

  2. jamie_cockburn

    Paul Guest

    Paul, Jul 31, 2006
    #2
    1. Advertisements

  3. jamie_cockburn

    jojo Guest

    Make a link (<a>) a block element first. Add some padding around the
    text, and - you have your area which is a link. Now you just have to
    define a different background-color for a:hover. Done.
    The CSS-code:

    a.blockLink {
    display:block;
    padding:20px;
    background-color:white;
    }
    a.blockLink:hover {
    background-color:fuchsia;
    }

    And the link should look like this:

    <a class="blockLink" href="www.google.de">This is a link to Google</a>

    The only problem: ASFAIK this does not work in IE.

    HTH, jojo
     
    jojo, Aug 1, 2006
    #3
  4. jamie_cockburn

    jojo Guest

    Update: seems to work in IE.
     
    jojo, Aug 1, 2006
    #4
  5. Update: seems to work in IE.

    I tried what you suggested, and it doesn't work. You still have to
    click on the part of the link text that is text, you can't click the
    background to follow the link.
     
    jamie_cockburn, Aug 1, 2006
    #5
  6. jamie_cockburn

    jojo Guest

    That's the part I supposed it does not work in IE. Seems like it really
    doesn't work. Perhaps it was a coincidence that it did work one time...
    So I will cancel the "Update: it works in IE". But nevertheless it
    should work in FF.
     
    jojo, Aug 1, 2006
    #6
  7. jamie_cockburn

    Els Guest

    IE needs a width in addition to the display:block.
     
    Els, Aug 1, 2006
    #7
    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.