Hi there,

I am trying to get my link text as well as the buttons to change together on hover of the image.

Currently, the image changes on hover and the text changes colour on hover of the actual text but the text won't change if only the image is hovered on.

See here: http://www.arnwoodvets.co.uk/bespoke.html

I kept the links as text so that they could be changed easily and not need a new gaphic for each new one.

I thought that setting the colour to #fff on the li:hover class would do it but it seems to ignore this . I also can't get the active image to change!!

Any help/suggestions offered would be greatly appreciated!

Here is my code:

a:hover {
color: #fff;
}

a:active {
color: #004200;
}

.left ul li {
padding: 15px 0px 0px 0px;
background: url(images/Buttonz.gif) no-repeat center left;
line-height: 2.5em;
list-style-type: none;
list-style-position: inside;
vertical-align: middle;
}
.left ul li a {
padding: 20px;
padding-left: 40px;
position:relative;
text-align: right center;
font-size: 14px;
font-weight: 700;
}
.left ul li:active {
padding: 15px 0px 0px 0px;
line-height: 2.5em;
list-style-type: none;
list-style-position: inside;
vertical-align: middle;
background-image: url(/images/Button2.gif);
}
.left ul li:hover {
padding: 15px 0px 0px 0px;
line-height: 2.5em;
list-style-type: none;
list-style-position: inside;
vertical-align: middle;
background-image: url(/images/Button2.gif);
color: #fff;
}

Thanks!

Here's something we prepared earlier.

http://www.webmaster-talk.com/websit...ut-images.html

Thanks Chris, I did see this earlier but its not quite what I need.

All I need to do is change the text colour rather than the actual text. Should be simple right?!

IE doesn't support pseudo classes on arbitrary elements, they are only supported on <a>nchors

The whatever:hover behaviour is the standard "fix"

Thanks Chris, though I have tried unsuccessfully to implement the whatever:hover solution and various javascript to overcome this problem over the past 2 days.

To clarify the image change on the hover on the .left ul li class works for ie7 but not ie6.

Even if I do get a work around for this it still won't change the link text when hovered over the image. I am beginning to think this part is impossible and am thinking of just creating a separate image for each link

Surely other programmers have wanted to create these with text as opposed to creating a new image for each and wanted link text colour to change (with the image too) on hover of the button image, even when not quite on the text.

Does this make sense? Any help with this would be massively appreciated and mega talkupation stuff allocated!! It's things like this that make web programming so painful but also so rewarding when (if) a solution is found!

changing the text on hover is very simple and was covered in the thread I linked to, and changing colour is not complicated either. If CSS doesn't work cross browser just use a simple script.

onmouseover="this.style.color='#colour_code';" onmouseout="this.style.color='#original_colour';"

Thanks Chris, this helps some more. Is it possible to incorporate this javascript somehow into my css or would I need to add the image to the html?

So in theory I would like to add an onmouseover properties to the image declared in the following to both add a new image and chane the text colour of the link on top:

.left ul li {
padding: 15px 0px 0px 0px;
background: url(images/Buttonz.gif) no-repeat center left;
line-height: 2.5em;
list-style-type: none;
list-style-position: inside;
vertical-align: middle;
}

Cheers

because it's a background image you can't access it directly with script, it will have to be the parent that is the scripted target.

The quickest way is to change the class properties of the element rather than attempting to swap out background images..

if you have two classes that ONLY reference the properties to be changed (image and colour) and swap them on mouseover / mouseout

onmouseover="this.className='hoverName';" onmouseout="this.className='normalName';"

apply the "normal" classname to the <li>s in the stylesheet and off you go

and have a look at http://www.candsdesign.co.uk/article...nus/rollovers/ , done a long time ago now so the CSS isn't as tidy as it should be.

That's absolutely brilliant, just what I required - thanks Chris. Even with my basic css skills I have managed to get this working for my site.

Just tried to add talkupation but won't let me... seems you were the one who last helped me when I attempted a site some time ago!

It's really great people like yourself help others so much on here - there would be so many more unfinished sites on the web otherwise!

This site is the best site I have seen for web help and I will hopefully be using this more and more as I get more skilled with web design and giving a bit back too!

Cheers