网站制作学习网DIV+CSS→正文:css控制鼠标放到表格时边框颜色改变
字体:

css控制鼠标放到表格时边框颜色改变

DIV+CSS 2010/6/28 16:19:51  点击:不统计

学习www.网for站asp制.cn作

当鼠标放在一个表格上时,表格的外框颜色发生变化

查看例子



<table border="1" cellpadding="0" cellspacing="0"  bordercolor="#FF0000" width="33%" id="AutoNumber1" height="259"
onmouseover="this.style.borderColor='#00FF00';"
onmouseout="this.style.borderColor='#FF0000';">
  <tr>
    <td width="100%" height="259"> </td>
  </tr>
</table>


<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse;" bordercolor="#FF0000" width="33%" id="AutoNumber1" height="259"
onmouseover="this.style.borderColor='#00FF00';"
onmouseout="this.style.borderColor='#FF0000';">
  <tr>
    <td width="100%" height="259"> </td>
  </tr>
</table>

<table border="15" cellpadding="0" cellspacing="10" style="border-collapse: collapse;FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=orange,endColorStr=lime);"
bordercolor="#FF9933" width="299" height="120" bgcolor="#FFFF99" onmouseover="
this.style.borderColor='blue';" onmouseout="
this.style.borderColor='#FF9933';">
<tr>
<td>
&nbsp;</td>
</tr>
</table>

<table border="15" cellpadding="0" cellspacing="10" style="border-collapse: collapse; border-style: solid; FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=orange,endColorStr=lime);"
bordercolor="#FF9933" width="20%" height="120" bgcolor="#FFFF99" onmouseover="
this.style.borderColor='blue';" onmouseout="
this.style.borderColor='#FF9933';">
<tr>
<td>
原边框是没有亮暗色区别,onmouseover后变色,onmouseout后变成有亮暗色的边框,且颜色比原来深了</td>
</tr>
</table>

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse; border-style: solid; " bordercolor="#FF0000" width="33%" id="AutoNumber1" height="259"
onmouseover="this.style.borderColor='#00FF00';"
onmouseout="this.style.borderColor='#FF0000';">
  <tr>
    <td width="100%" height="259"> </td>
  </tr>
</table>


border-collapse属性设置表格的边框是否被合并为一个单一的边框,还是象在标准的 HTML 中那样分开显示,默认值: separate ,表示边框会被分开,collapse表示边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

来看第二个表格边框,鼠标滑过后边框的颜色, 上下的颜色有点不一样,边框加厚点就能看出来,原边框是没有亮暗色区别,onmouseover后变色,onmouseout后变成有亮暗色的边框,且颜色比原来深了,就是第三个表格边框

为了解决这个问题,看第四个和第五个表格边框,即给表格添加了border-style: solid属性,就解决了上面的问题


·上一篇:常用CSS缩写语法总结 >>    ·下一篇:css zoom属性 >>
推荐文章
最新文章