How to change table background onmouseover?
I have tabs one says 'Search' and the other says 'Tags'
Search is the default tab so it has a grey rounded edge table background while 'Tags' has a white rounded edge background.
I want to be able to put the mouse over 'Tags' and the background to change from white to grey. How is this done?
Here is the HTML code:
<div class="roundedcornr_box_407494">
<div class="roundedcornr_top_407494"><div></div></div>
<div class="roundedcornr_content_407494">
<font color="#ffffff" size="2" face="helvetica">
Search
</font>
</div>
<div class="roundedcornr_bottom_407494"><div></div></div>
</div>
</td>
</tr>
</table>
</td>
<td>
<div style="margin-left:10px;" />
<center>
<table height="20" width="30" cellpadding="0" cellspacing="0">
<tr>
<td>
<center>
<div class="roundedcornr_box_235759">
<div class="roundedcornr_top_235759"><div></div></div>
<div class="roundedcornr_content_235759">
<font color="#585858" size="2" face="helvetica">
Tags
</font> </div>
<div class="roundedcornr_bottom_235759"><div></div></div>
</div>
</center>
</td>
</tr>
</table>
And CSS:
.roundedcornr_box_407494 {
background: #bdbdbd;
}
.roundedcornr_top_407494 div {
background: url(roundedcornr_407494_tl.png) no-repeat top left;
}
.roundedcornr_top_407494 {
background: url(roundedcornr_407494_tr.png) no-repeat top right;
}
.roundedcornr_bottom_407494 div {
background: url(roundedcornr_407494_bl.png) no-repeat bottom left;
开发者_JS百科}
.roundedcornr_bottom_407494 {
background: url(roundedcornr_407494_br.png) no-repeat bottom right;
}
.roundedcornr_top_407494 div, .roundedcornr_top_407494,
.roundedcornr_bottom_407494 div, .roundedcornr_bottom_407494 {
width: 100%;
height: 5px;
font-size: 1px;
}
.roundedcornr_content_407494 { margin: 0 5px; }
Thanks!
James
With :hover.
Sample: http://jsfiddle.net/stKn3/
With Css
table:hover
{
background-color:gray;
}
or
table tr:hover
{
background-color:gray;
}
I think its better to have a single images as background(with corners #as you trying to do) of the tabs And changing the background image on mouseover event. Instead of splitting them and merging the pieces together again by div tags.
Follow these examples :
http://www.codefoot.com/javascript/script_image_textarea_mouseover.html
http://www.codebelly.com/javascript/backimagechange.html
Try this
<TR onMouseover="this.bgColor='#EEEEEE'"onMouseout="this.bgColor='#FFFFFF'">
<td>Some data</td>
</TR>
OR
<table onMouseover="this.bgColor='#EEEEEE'" onMouseout="this.bgColor='#FFFFFF'">
</table>
EDIT:
Try this complete HTML.
<html>
<body>
<table >
<tr onMouseover="this.bgColor='#EEEE00'" onMouseout="this.bgColor='#FFFFFF'">
<td>
Some Data on table's first row
</td>
</tr>
</table>
</body>
</html>
It needs some modifications to use on your code. Try it on your own.
加载中,请稍侯......
精彩评论