CSS hover style affects image hotspots

Discussion in 'HTML' started by Steve Gouldstone, Feb 6, 2006.

  1. I want to get links highlighted in a differernt colour when the mouse
    moves over them (yellow), so I have the following CSS in my HTML file
    header:

    <style>
    <!--
    a{text-decoration:none;font-weight:bold;color=navy}
    a:hover{color:red;
    text-decoration:underline;background-color:#FFFFAF;font-weight:bold }
    -->
    </style>

    This works fine ... except that image hotspots are also coloured
    yellow when the mouse moves over them. This looks terrible!

    Is there some way to define the hover style so it affects text links
    only?

    Thanks

    Steve
     
    Steve Gouldstone, Feb 6, 2006
    #1
    1. Advertisements

  2. Steve Gouldstone

    Els Guest

    Yes, have counter styles for the image links later in the stylesheet.
    For instance:

    a:hover img{
    color:white;
    text-decoration:none;
    background-color:white;
    }
     
    Els, Feb 6, 2006
    #2
    1. Advertisements

  3. Thanks very much for this hint. Unfortunately, I still can't get it to
    work correctly. I have this:

    <style>
    <!--
    a{text-decoration:none;font-weight:bold;color:navy}
    a:hover{color:red;
    text-decoration:underline;background-color:#FFFFAF;font-weight:bold }
    a:hover img{text-decoration:none; background-color:transparent;
    color:transparent }
    -->
    </style>

    and the setting the img hotspots to transparent does not work. If I
    set them to 'red' for example it works, but as it is I still only get
    a horrible coloured rectangle where the image is, when all I want is
    'nothing to happen'!

    Maybe I'm doing something stupid, but do you have any more ideas?

    Thanks
    Steve
     
    Steve Gouldstone, Feb 7, 2006
    #3
  4. Steve Gouldstone

    Els Guest

    Without seeing your page this is of course a guess, but what if you
    add this?
    a:hover img{border:none;}
     
    Els, Feb 7, 2006
    #4
  5. Thanks Els, I actually found that display:none does most of what I
    want EXCEPT the hotspots flicker and do not seem to work reliably (you
    have to click on them a few times to jump to the target).

    For my code, see www.childrenfirstparty.org/blog

    the word "Children" in the banner has a hotpot over it. It flickers
    horribly and the hotspot only works some of the time.

    Any ideas?

    Thanks
     
    Steve Gouldstone, Feb 7, 2006
    #5
  6. Steve Gouldstone

    Els Guest

    A quick look at the source shows me a lot of images with funny names
    that seem to be the horizontal navigation, and above that a lot of
    divs and absolute positioning and more funny image names in them, and
    even empty positioned divs. Does that have anything to do with the
    'hotspot'? How did you make this hotspot? I've never seen such
    intermittend mouseover effect on an image before.

    My personal impression / advice is, that you need to go back to the
    drawing board, and use a text editor, so you will know what it is you
    are writing. I've never heard of "Serif PagePlus 11, 0, 2, 1" before,
    but I'm quite confident you're better off uninstalling it from your PC
    :)
     
    Els, Feb 7, 2006
    #6
    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.