Image underline during hover

NevadaSam · 05-07-2007, 06:25 PM

I want to use a dotted underline when I hover over a text link, but I don't want this to show up when I hover over a image link. Is there a way I can do this without calling a different class when I have an image link?

Code:

<style type="text/css">

img {
	background-color:#FFFFFF;
	border: 1px solid #ff12fc;
	padding: 5px;
	margin: 5px 5px 0 0;
}

a:hover {
	color:#666;
	text-decoration: none;
	border-bottom:dotted;
}

a:hover img {
	background-color:#00FF00;
	border: 1px solid #ff12fc;
	padding: 5px;
	margin: 5px 5px 0 0;
	text-decoration: none; /* the underline shouldn't show, but it does */
}

</style>

Thanks for looking at this.

Sam

webexplorer · 05-07-2007, 08:43 PM

What software are you using for your website?

05-07-2007, 11:42 PM

I think it has to do with border-bottom:dotted;, so you might have to add the same in the hover img style as border-bottom:solid; .. There's more at CSS Border Properties ..

Let me know if this worked for you or not.

Code:

<style type="text/css">

img {
	background-color:#FFFFFF;
	border: 1px solid #ff12fc;
	padding: 5px;
	margin: 5px 5px 0 0;
}

a:hover {
	color:#666;
	text-decoration: none;
	border-bottom:dotted;
}

a:hover img {
	background-color:#00FF00;
	border: 1px solid #ff12fc;
	padding: 5px;
	margin: 5px 5px 0 0;
	border-bottom: solid;
	text-decoration: none; /* the underline shouldn't show, but it does */
}

</style>

***VamPyroX*** · 05-08-2007, 12:21 AM

While CSS may make a lot of things "awesome", it doesn't always work on all browsers.

There are things that I can do in IE but not in Firefox.

PowerON · 05-14-2007, 12:01 PM

Quote:

Originally Posted by VamPyroX

While CSS may make a lot of things "awesome", it doesn't always work on all browsers.

There are things that I can do in IE but not in Firefox.

no. CSS appear more and better control on Firefox than IE in PC

however, for Mac - Safari appear more fine graphic visual on CSS than Firefox.

You can test most weblog that use Wordpress with heavy nice CSS, compare between IE and Firefox.

05-07-2007, 06:25 PM	#1 (permalink)
NevadaSam Registered User Join Date: Apr 2006 Location: Georgia Posts: 9	Image underline during hover I want to use a dotted underline when I hover over a text link, but I don't want this to show up when I hover over a image link. Is there a way I can do this without calling a different class when I have an image link? Code: <style type="text/css"> img { background-color:#FFFFFF; border: 1px solid #ff12fc; padding: 5px; margin: 5px 5px 0 0; } a:hover { color:#666; text-decoration: none; border-bottom:dotted; } a:hover img { background-color:#00FF00; border: 1px solid #ff12fc; padding: 5px; margin: 5px 5px 0 0; text-decoration: none; /* the underline shouldn't show, but it does */ } </style> Thanks for looking at this. Sam

05-08-2007, 12:21 AM	#4 (permalink)
*VamPyroX* bloody phreak from hell Join Date: Feb 2003 Location: Hell Posts: 31,473	While CSS may make a lot of things "awesome", it doesn't always work on all browsers. There are things that I can do in IE but not in Firefox. __________________ Check out my city... CLICK HERE! (If you already visited yesterday, visit again today!)

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Today
Deafness	Sponsored Links __________________ This advertising will not be shown in this way to registered members. Register your free account today and become a member on AllDeaf.com

05-07-2007, 08:43 PM	#2 (permalink)
webexplorer I'm listening to everyone Join Date: Jun 2003 Location: New England Posts: 4,505	What software are you using for your website?