CSS hover style affects image hotspots

  • Thread starter Steve Gouldstone
  • Start date
S

Steve Gouldstone

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
 
E

Els

Steve said:
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?

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;
}
 
S

Steve Gouldstone

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;
}

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
 
E

Els

Steve said:
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?

Without seeing your page this is of course a guess, but what if you
add this?
a:hover img{border:none;}
 
S

Steve Gouldstone

Without seeing your page this is of course a guess, but what if you
add this?
a:hover img{border:none;}

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
 
E

Els

Steve said:
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?

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
:)
 

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. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top