CSS+JS实现鼠标经过改变表单背景色的问题.

tidelgl 2008-10-27 09:29:13

已经对IE无语了,CSS2.0 的hover不能正常使用,现在只好用JS+CSS了.
下面是实现鼠标经过改变背景色的的代码.

<table width="200" border="1">

  <tr onmouseout="this.style.backgroundColor=''" onmouseover="this.style.backgroundColor='#FFccaa'">

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>

现成在把JS和CSS分离,因为很多页面要用到相同的样式.
如何改成这样子呢?

<script language="javascript">

function test(){

	实现鼠标经过改变背景色的的代码.





</script>



<table width="200" border="1">

  <tr onmouseout="test()">

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>

...全文

1710 16 打赏收藏转发到动态举报

写回复

用AI写文章

16 条回复

切换为时间正序

请发表友善的回复…

发表回复

webad20 2008-10-30

打赏
举报

不是所有对象都有hover事件而已

Eagle_ice 2008-10-29

打赏
举报

neo_yoho 解释的很耐心...

yang709610485 2008-10-29

打赏
举报

onmouseover触发事件修改背景色,用getelementbyid找到对象再对背景色修改

hotel9545 2008-10-29

打赏
举报

楼主怎么还不给分结贴呀。

wwclovexp 2008-10-29

打赏
举报

你CSS好长啊,实现应用还不如楼上的了

ddcatlee 2008-10-28

打赏
举报

http://www.ddcat.net/bbs2007/showthread.php?t=370&highlight=hover

MOTA 2008-10-28

打赏
举报

纯CSS活

bestdowt1314 2008-10-28

打赏
举报

[Quote=引用 3 楼 neo_yoho 的回复:]
是很简单
<tr onmouseout="test(this)" onmouseover="test(this)">
当鼠标移入或移出TR的时候执行test(this)方法其中的this就是控件(tr)本身

function test(obj){
obj.style.backgroundColor=obj.style.backgroundColor.toLowerCase()=='#ffccaa'?"":"#ffccaa"
}
这里的obj表示的是方法接收的控件对象
obj.style就是改变它的CSS
会CSS就知道backgroundColor的含义了吧
obj.style.backgroundColor=obj.style.backgroun…
[/Quote]可能直接用css写用.只是如果是ie6只能支持a:hover

gaocctv 2008-10-28

打赏
举报

ie中也可以实现hover的功能，只是顺序一定要写正确：LVHA

neo_yoho 2008-10-28

打赏
举报

[Quote=引用 4 楼 tidelgl 的回复:]
刚刚试试了很久,还有些不明白,
'#ffccaa'?"":"#ffccaa"
为什么前面是单引号,后面是双引号呢?
toLowerCase()这又是什么方法呢?
但愿你还没有睡啊..
[/Quote]
在这里单引号和双引号没区别
toLowerCase()是将对象中的字母变为小写
因为之前你给的代码中的#FFccaa跟#ffccaa是不等的
加了这个方法后让大写字母都转成小写的这样就等了

starwu 2008-10-28

打赏
举报

toLowerCase() //把字母写改为小写.其实没有什么必要..

hotel9545 2008-10-28

打赏
举报

不用JS，单纯CSS就可以做的。

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

table:hover
{
background:#560;
}

a:link table
{
*background:#065;
_background:#065;
text-decoration:none;
cursor:point;
cursor:default;
}
a:hover table
{
*background:#560;
_background:#560;
cursor:point;
cursor:default;
}

a:visited table
{
*background:#065;
_background:#065;
text-decoration:none;
cursor:point;
cursor:default;
}

</style>
<a href="#">
<table width="200" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</a>

tidelgl 2008-10-27

打赏
举报

刚刚试试了很久,还有些不明白,
'#ffccaa'?"":"#ffccaa"
为什么前面是单引号,后面是双引号呢?
toLowerCase()这又是什么方法呢?
但愿你还没有睡啊..

neo_yoho 2008-10-27

打赏
举报

是很简单
<tr onmouseout="test(this)" onmouseover="test(this)">
当鼠标移入或移出TR的时候执行test(this)方法其中的this就是控件(tr)本身

function test(obj){
obj.style.backgroundColor=obj.style.backgroundColor.toLowerCase()=='#ffccaa'?"":"#ffccaa"
}
这里的obj表示的是方法接收的控件对象
obj.style就是改变它的CSS
会CSS就知道backgroundColor的含义了吧
obj.style.backgroundColor=obj.style.backgroundColor.toLowerCase()=='#ffccaa'?"":"#ffccaa"
其实是当对象的样式backgroundColor属性为#ffccaa的时候设置backgroundColor为""(空) 反之设置为#ffccaa

一般的css中属性 -后的第一个字母大写为JS写法
比如:
background在JS里就是background
border还是boder
background-color 在JS里是backgroundColor
font-size在JS里是fontSize

tidelgl 2008-10-27

打赏
举报

1楼可否注释一下?
我以为很简单,给出来我就可以加什么表格边框大小颜色的改变啊什么的.
可是现在不明白了,能否再多引导一下?

neo_yoho 2008-10-27

打赏
举报



<script language="javascript">

function test(obj){

obj.style.backgroundColor=obj.style.backgroundColor.toLowerCase()=='#ffccaa'?"":"#ffccaa"

}

</script>



<table width="200" border="1">

  <tr onmouseout="test(this)" onmouseover="test(this)">

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

  <tr>

    <td> </td>

    <td> </td>

    <td> </td>

  </tr>

</table>