Image underline during hover

NevadaSam

NevadaSam

New Member
Joined
Apr 28, 2006
Messages
9
Reaction score
0
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
 
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>
 
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. :(
 
VamPyroX said:
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. :(
Click to expand...

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.
 
Back
Top