Put the onmouseover
and onmouseout
event to <td>
instead:
<table>
<tbody>
<tr>
<td onmouseover="this.className='hover';" onmouseout="this.className='';">2222222<span class="btn default-hidden">000000</span>33333</td>
</tr>
</tbody>
</table>
Here is a JSFiddle
UPDATE: To deal with IE6, you can change the table structure to DIV & CSS, which is supported by IE6. Since IE6 does not support :hover
CSS selector, you can also use this fix to make use of :hover
in IE6: http://blog.delivi.com/javascript/updated-hover-for-non-anchor-elements-in-ie6/