Css Mousehover table effect

[unknowngiver]

Hey
does anyone know how to make those mousehover effect in CSS..where if u move ur mouse over a table..the background color changes?
Thanks

 

[Dan]

<style type="text/css">
table:hover { background: #000; }
</style>

I don't know if that works in IE7, but it doesn't in IE6. It works in FF, though.

 

[unknowngiver]

but would that make all tables like that? what do i have to change so only specific tables do it.

 

[Dan]

Add an id to your table, such as <table id="lolhi">... and use:

<style type="text/css">
table#lolhi:hover { background: #000; }
</style>

Or if you want multiple tables, add a class to the ones you want, like <table class="hoverthing">... <table class="hoverthing">... and use:

<style type="text/css">
table.hoverthing:hover { background: #000; }
</style>

 

[unknowngiver]

nopes doesnt work in FF or IE or Flock

 

[Dan]

I just tested it with:

<style type="text/css">
table.hoverthing:hover { background: #000; }
</style>

<table class="hoverthing">
<tr><td>lol</td></tr>
</table>

<table>
<tr><td>merp</td></tr>
</table>

It worked in Firefox.



You can use the following JS inside the table tag (Set the onmouseover and onmouseout colors):

onmouseover="this.style.background = '#000'" onmouseout="this.style.background = '#fff'"

example: <table onmouseover="........>

 

[unknowngiver]

nopes same
heres the code

<table class="showmedia" border="0" cellpadding="2" cellspacing="0">
														<tr bgcolor="#adce99">
															<td> </td>
															<td><img src="media/<?echo $m['dp'];?>" height="50px" width="50px" /></td>
											<td> </td>
											<td width="100%" valign="top"><p id='title1'><a href="media.php?id=<?php echo $m['id']."&type=".$m['type']?>"><?echo $m['title'];?></a></p><br />
											<p id="text"><?echo $m['description'];?></p><br />
											<p id="title2">Added By:<a href="vuser.php?id=<?php echo $m['by_id'];?>"><?php echo $database->userName($m['by_id']);?></a>  <?echo days_ago($m['timestamp'])." ";?>
											<?echo date_time($m['timestamp']);?> </p></td>
											</tr>
											</table>

 

[beaver6813]

Do you have to use tables? I found the most compatible way without javascript was to use inline lists

<style type='text/css'>
	/*Pagination Styling*/
#comment-tabs{
margin: 0;
padding: 0;
text-align:center;
font: bold 1em 'Lucida Grande', Verdana, Arial, Sans-Serif;
}
#comment-tabs li{
display: inline;
}
#comment-tabs li a{
margin-left:5px;
color: #80C9FF;
padding: 6px 7px; /*padding of tabs*/
text-decoration: none;
border:1px black solid;
background-color:#00375F;
}
#comment-tabs li a:visited{
color: #BFE4FF;
}
#comment-tabs li a:hover{
color: #BFE4FF;
}
#comment-tabs li a:active{
color: #BFE4FF;
background-color:#00528D;
}
#comment-tabs .selected{
background-color:#1E6192;
}
</style>

Then you can just do a simple list and it looks great

<ul id="comment-tabs">'
<li><a href='http://beaver6813.com' class='selected'>Beaver6813</a></li>
<li><a href='http://beaver6813.com' class='CommentTab'>Beaver68132</a></li>
</ul>

 

[DylanButler]

Yeah IE isn't gonna support the pseudo-class :hover on anything but links without javascript...