2 replies [Last post]
andrewmta
Offline
newbie
Last seen: 15 years 30 weeks ago
Joined: 2006-01-01
Posts: 2
Points: 0

Hi,

Thanks for making this forum resource available. I really appreciate being able to look through others problems and solutions and have gotten a few ideas myself.

Now my problem. The following piece of code is from a PHP echo that I am trying to create. I'm trying to make it so that when a users cursor goes over a cell both the cell background color and the color of the text in that cell change color. So far the only way I've been able to do it was to create a second mouseover designation for the link class as well. But this leads to the odd occassion that a user has their cursor over the cell but not simultaneously over the link and so it can look odd. I know that there must be a very simple solution to this.

I've tried combining both the cell formatting and text formatting into a single class but it doesn't seem to work. Thie following code is the closest I've come to getting it to work. Any suggestions would be appreciated.

<td class="tabCellOff" onmouseover="this.className=\'tabCellOn\'" onmouseout="this.className=\'tabCellOff\'"><a href="' . $url .'" class="tabTextOff" onmouseover="this.className=\'tabTextOn\'" onmouseout="this.className=\'tabTextOff\'">' . $desc . '</a></td>

Below is an excerpt from my external style sheet that shows how I have my CSS laid out.

.tabTextOn {
	padding: 3px 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0.1em;
	color: #FFFFFF;
	text-decoration: none;
	font: bold 12px Verdana;
}
.tabCellOff {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #4C84E4;
	border-bottom: none;
	background: #FFFFFF;
}
.tabTextOff {
	padding: 3px 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0.1em;
	color: #000000;
	text-decoration: none;
	font: bold 12px Verdana;
}
.tabCellSelected {
	padding: 3px 0.5em;
	margin-left: 3px;
	border: 1px solid #4C84E4;
	border-bottom: none;
	background: #E5EEFC;
}
.tabTextSelected {
	padding: 3px 0;
	margin-left: 0;
	margin-bottom: 0;
	margin-top: 0.1em;
	color: #4C84E4;
	text-decoration: none;
	font: bold 12px Verdana;
}




Thank you!

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 8 years 44 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

A Really Simple Mouseover Solution I Hope

I didn't read through your code completely, so I may be off base.

Make the <a> element display block and set its height to 100%.

You can see something similar on this example page - the "some-link" cell.

andrewmta
Offline
newbie
Last seen: 15 years 30 weeks ago
Joined: 2006-01-01
Posts: 2
Points: 0

A Really Simple Mouseover Solution I Hope

Thanks! That definately looks a little better although my tabs have a 1 pixel border and it's still possible that the tab could be highlighted without the text mousing over.

This is much closer to what I needed tho. Thank you.