Hover function that just works for text

leonk09 · Feb 13, 2006

Okay I have a link that looks like this:

Code:

<style type="text/css">
a.link1:link, a.link1:visited  {
	text-decoration: none;
	color: #000000;
	font-family: Verdana, Tahoma;
	font-size: 11px;
	}
a.link1:hover {
background-color: #000000;
	text-decoration: none;
	color: #99CCFF;
	font-size: 11px;
}
</style>
<A href="[URL unfurl="true"]http://www.mypage"[/URL] class="link1"><img src="pic.gif"><br>Description of link</a>

The gif image is mostly transparent, and I don't want the background color to change on the image, just the text.

Is there a way to do this?

Foamcow · Feb 13, 2006

Code:

background-color: #000000;

what do you think that does?

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

leonk09 · Feb 13, 2006

I just one the text to change background.

At the moment the background of the image changes too (as the image is mostly transparent this is quite apparent).

trollacious · Feb 13, 2006

Try this:

<A href="

http://www.mypage"><img

src="pic.gif"></a><div class="link1"><A href="

http://www.mypage">Description

of link</a></div>

This will change the color of the text background without changing the color of the graphic background. However, it will NOT change the color of the text background if the mouse is over the graphic. If you want that, you'll have to use Javascript.

Lee

Vragabond · Feb 13, 2006

How about this?

Code:

<style type="text/css">
a.link1:link, a.link1:visited  {
    text-decoration: none;
    color: #000000;
    font-family: Verdana, Tahoma;
    font-size: 11px;
    }
a.link1:hover {
background-color: #000000;
    text-decoration: none;
    color: #99CCFF;
    font-size: 11px;
}
[!]a.link1:hover img {
  background-color: blue; /* or whatever you want */
}[/!]
</style>
<A href="[URL unfurl="true"]http://www.mypage"[/URL] class="link1"><img src="pic.gif"><br>Description of link</a>

BillyRayPreachersSon · Feb 13, 2006

Vragabond's solution will work, assuming that whatever is behind the image is a solid colour (which we don't know, because you've not told us). If it is not, then you will need to modify your markup to be something like this:

Code:

<style type="text/css">
	a.link1:link, a.link1:visited  {
		text-decoration: none;
		color: #000000;
		font-family: Verdana, Tahoma;
		font-size: 11px;
	}
	a.link1:hover [!]span[/!] {
		background-color: #000000;
		text-decoration: none;
		color: #99CCFF;
		font-size: 11px;
	}
</style>
<a href="[URL unfurl="true"]http://www.mypage"[/URL] class="link1"><img src="pic.gif"><br>[!]<span>[/!]Description of link[!]</span>[/!]</a>

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

Foamcow · Feb 14, 2006

I think that seeing the code in it's original context would help here.
It might be that the link is part of a list of links, in which case the extra styling could be hooked into list elements instead of having to introduce spans etc. (not that there is essentially anything wrong with that).

Forgive my initial post. When I read it back this morning it did seem a little abrupt which was not my intention.

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

leonk09 · Feb 14, 2006

Thanks for all your help guys.

Here's the code I currenlty have in my page:

Code:

<style type="text/css">
    a.gift:link, a.gift:visited  {
	text-decoration: none;
	color: #000000;
	font-family: Verdana, Tahoma;
	font-size: 11px;
	}
a.gift:hover span {
background-color: #000000;
	text-decoration: none;
	color: #99CCFF;
	font-size: 11px;
}
</style>


<td width="144" height="84" background="images/free-gifts/Menu/selected-top.jpg" align="center">
										<p align="center">
										<a href="free-gifts.php" class="gift"><img border="0" src="images/free-gifts/Menu/free-poker-chips2.gif" width="93" height="63"></a><br><span>Free Poker Chips</span></a></td>

This isn't working at the moment.
And no, the background to the image isn't solid. The link also isn't in a list.

I may look into doing this with javascript, as I actually want to put the text to the right of the image, I don't think all of this would be possible using CSS. Although I could well be wrong.

Vragabond · Feb 14, 2006

When you say it is not working, what is not working? The effect is not shown or the effect is shown where it shouldn't? What browser are you using? Do you have a link to this page so that we could see it for ourselves?

BillyRayPreachersSon · Feb 14, 2006

It's not working because you're erroneously closing your anchor element twice. Remove the first closing tag and you should be set.

Really - you should be able to find these things out for yourself simply by validating your code.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

leonk09 · Feb 15, 2006

Sorry, I should have explained the problem better.

I am basically not getting any hover effects, no change on the page - the duplicate </a> was just a typo when copying out to this page, even with it removed there is no still no change on hover.

I tried this using both

Code:

a.gift:hover span{
}

and

Code:

a.gift:hover img {
}

I've looked a bit more into it, and the problem may be to do with IE.

I am now looking into suckerfish CSS.

BillyRayPreachersSon · Feb 15, 2006

the duplicate </a> was just a typo when copying out to this page

So how can we be sure that any of the code you've shown us is good?

Perhaps giving us a URL would be the best thing if you still want this resolved.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

leonk09 · Feb 15, 2006

So how can we be sure that any of the code you've shown us is good?

Point taken.

Well here's basically the code I am using:

http://www.pokerchipstack.co.uk/test.html

This is not working in my broswer (IE 6).

I have created what I basically want using a simple script:

http://www.pokerchipstack.co.uk/test2.html

But because I have 6 similar links on the page, all will require their own script. So I am really looking at ways to do this with CSS.

BillyRayPreachersSon · Feb 15, 2006

It not working in IE is to do with IE's poor implementation of the hover pseudo-class not working on any elements other than the anchor itself (even though you have the class on the anchor, you're trying to style the span).

If only we'd known at the start it was only IE you were having issues with ;-)

For IE, you'll have to either use 2 anchors, or JavaScript / behaviours.

Hope this helps,
Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

leonk09 · Feb 15, 2006

I have been told by numerous sources that suckerfish CSS is what I am after. I am looking at it now, if I'll post the answer if I find it.

Foamcow · Feb 15, 2006

Suckerfish dropdowns do something totally different to what it appears you are trying to do with this code.

Can you show us the URL of the page as a whole with a description of what you are trying to achieve rather than how you are doing it and finding it doesn't work.

I'm sure we can help you out then!

Foamcow Heavy Industries - Web design and ranting
Buy Languedoc wines in the UK

CliveC · Feb 15, 2006

Seems like vrags suggestion works fine with a slight mod:

Code:

<style type="text/css">
body {background: pink};
img  {border:0}
a.link1:link, a.link1:visited  {
    text-decoration: none;
    color: #000000;
    font-family: Verdana, Tahoma;
    font-size: 11px;
    }
a.link1:hover {
    background: #000000;
    text-decoration: none;
    color: #99CCFF;
    font-size: 11px;
}
a.link1:hover img {background-color: pink}
</style>
<a href="[URL unfurl="true"]http://www.mypage"[/URL] class="link1">
<img src="pic.gif" width="100" height="100"></div><br>
Description of link
</a>

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://citywastepaper.com

CliveC · Feb 15, 2006

OT (Off Thread)

Code:

<html><head>
<style type="text/css">
body     {background:pink}
a        {text-decoration:none; color:blue}
a:hover  {background:silver}
</style></head>
<body>
Using hover psuedo class on text:<br />
<iframe name="frame" width="0" height="0"></iframe>
<a href="#" target="frame">Oooh!</a>
</body></html>

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://citywastepaper.com

BillyRayPreachersSon · Feb 15, 2006

Clive,

I think it only fair to let the OP know that your first solution wouldn't validate, due to the erroneous closing div tag.

Dan

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

CliveC · Feb 15, 2006

Sorry, I see that my answer was maybe redundant anyway although I did test it with a transparent image and so presubably it would work (without the /div) and without the background color.

Clive

http://tubularity.com

http://PalliativeCareConsulting.org

http://citywastepaper.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Hover function that just works for text

Technical User

Programmer

Technical User

Programmer

Programmer

Programmer

Programmer

Technical User

Programmer

Programmer

Technical User

Programmer

Technical User

Programmer

Technical User

Programmer

Programmer

Programmer

Programmer

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor