Question

我有标签，一个说'搜索'，另一个说'标签'

搜索是默认选项卡，因此它具有灰色的圆形边缘表背景，而“标签”具有白色圆形边缘背景。

我希望能够将鼠标放在“标签”和背景上，从白色变为灰色。这是怎么做到的？

以下是HTML代码：

<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>

和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;
}
.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; }

谢谢！

詹姆斯

Answer 1

使用Css

table:hover
{
    background-color:gray;
}

或

table tr:hover
{
    background-color:gray;
}

Answer 2

用：悬停。

样品： http://jsfiddle.net/stKn3/

Answer 3

我认为最好将单个图像作为背景（使用角落#as，你试图这样做）和更改鼠标悬停事件的背景图像。而不是拆分它们并通过div标签再次将各个部分合并在一起。

请遵循以下示例：

http://www.codefoot.com/javascript/script_image_textarea_mouseover.html

http://www.codebelly.com/javascript/backimagechange.html

Answer 4

试试这个

<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>

编辑：

试试这个完整的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>

需要对代码进行一些修改才能使用。自己尝试一下。

如何更改表格背景onmouseover？

4 个答案: