在样式表中如何实现：当鼠标移到/移开...时变色？

ruonaner 2003-09-27 09:37:47
我想请教各位：
在样式表中如何实现：当鼠标移到/移开<tr>...</tr>时变色？
这样的话，不必要在程序中用事件触发。
...全文
736 27 打赏 收藏 转发到动态 举报
写回复
用AI写文章
27 条回复
切换为时间正序
请发表友善的回复…
发表回复
avonqin 2003-09-28
  • 打赏
  • 举报
 回复
nb哦~~~~~~~~~~~~~~~~~~~~``
孟子E章 2003-09-28
  • 打赏
  • 举报
 回复
<style type="text/css">
TR {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
</style>

<table border="1" width="300">
<tr id="a">
<td>移上来看看</td>
</tr>
</table>
cngis 2003-09-28
  • 打赏
  • 举报
 回复
{star : expression(onmouseover=function()
{this.style.backgroundColor="#FF0000"},
onmouseout=function(){this.style.backgroundColor="#FFFFFF"}) }
klgzb 2003-09-28
  • 打赏
  • 举报
 回复
不用那么多的对象层吧，列如:
<tr bgcolor='#EBF5FC'
onmouseover="this.bgColor='#dddddd'" onmouseout="this.bgColor='#EBF5FC'">
ruonaner 2003-09-28
  • 打赏
  • 举报
 回复
谢谢各位前辈长老，真是大开眼界！我越来越喜欢CSDN了，我相信你们的爱心会滋润更多编程爱好者的心田，会让CSDN成为我们的家。
bxfok 2003-09-28
  • 打赏
  • 举报
 回复
quady(这个世界好难混）
没有错的，对得很了
云帆 2003-09-28
  • 打赏
  • 举报
 回复
支持：net_lover(孟子E章)！！！！！！！
xiaodele 2003-09-28
  • 打赏
  • 举报
 回复
孟子E章 的方法真的挺实用的
xianglong 2003-09-28
  • 打赏
  • 举报
 回复
onMouseOut=""this.style.backgroundColor='#ffffff';"" onMouseOver=""this.style.backgroundColor='#effbff'""
avonqin 2003-09-28
  • 打赏
  • 举报
 回复
灌上瘾啦？孟子E章早把问题解决了
BainStudio 2003-09-28
  • 打赏
  • 举报
 回复
就通过两个事件解决.
onMouseover,onMouseOut
方法都已经说了
stefli 2003-09-28
  • 打赏
  • 举报
 回复
俺也来一个：

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<style>
.bgover {background:black}
.bgout {background:red}
</style>

<BODY bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table width="300" align="center" class=styleItem>
<tr onMouseover="this.className='bgover'" onMouseOut="this.className='bgout'">
<td>aaaaaaaaaaaa</td>
<td>aaaaaaaaaaaa</td>
<td>aaaaaaaaaaaa</td>
</tr>
</table>
</BODY>
</HTML>
topmonkey 2003-09-28
  • 打赏
  • 举报
 回复
还有最后一个文件：
---------------------------------------------------------------------------------
ChangeBackgroundColor_BUT.htc
--------
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />

<SCRIPT LANGUAGE="JavaScript">
attachEvent ('onmouseover', overThis);
attachEvent ('onmouseout', outThis);

function cleanup()
{
detachEvent ('onmouseover', overThis);
detachEvent ('onmouseout', outThis);
}

function overThis()
{
event.srcElement.style.background="#eeeeee";
return;
}

function outThis()
{
event.srcElement.style.background="#CCCCCC";
return;
}

</SCRIPT>
topmonkey 2003-09-28
  • 打赏
  • 举报
 回复
还好有人顶了一下，要不然我还不能继续发了呢。刚才的styleItem.htc文件有点错误，更改如下
---------------------------------------------------------------------------------
styleItem.htc
--------
<script language=javascript>
switch(tagName)
{
case "INPUT":
switch(type)
{
case 'text':
style.border = "1px solid #9A9999";
style.backgroundColor = "#F8F8F8";
style.height = "18px";
style.font = "normal 12px 宋体";
style.color = "#000000";
break;

case 'password':
style.border = "1px solid #9A9999";
style.backgroundColor = "#F8F8F8";
style.height = "18px";
style.font = "normal 12px 宋体";
style.color = "#000000";
break;

case 'radio':
style.border = "0px";
style.backgroundColor = "transparent";
break;

case 'checkbox':
style.border = "0px";
style.backgroundColor = "transparent";
break;

case 'submit':
style.borderLeft = "1px solid #E8E8E8";
style.borderRight = "1px solid #696969";
style.height = "20px";
style.borderTop = "1px solid #E8E8E8";
style.borderBottom = "1px solid #696969";
style.backgroundColor = "#CCCCCC";
style.font = "normal 12px 宋体";
style.behavior = "url(ChangeBackgroundColor_BUT.htc)";

case 'reset':
style.borderLeft = "1px solid #E8E8E8";
style.borderRight = "1px solid #696969";
style.height = "20px";
style.borderTop = "1px solid #E8E8E8";
style.borderBottom = "1px solid #696969";
style.backgroundColor = "#CCCCCC";
style.font = "normal 12px 宋体";
style.behavior = "url(ChangeBackgroundColor_BUT.htc)";

case 'button':
style.borderLeft = "1px solid #E8E8E8";
style.borderRight = "1px solid #696969";
style.height = "20px";
style.borderTop = "1px solid #E8E8E8";
style.borderBottom = "1px solid #696969";
style.backgroundColor = "#CCCCCC";
style.font = "normal 12px 宋体";
style.behavior = "url(ChangeBackgroundColor_BUT.htc)";

default:
//;
}

case 'TABLE':
border = "1px";
cellPadding = "2px";
cellSpacing = "0px";
bgColor = "#e7e7e7";
borderColorLight = "#878787";
borderColorDark = "#FFFFFF";
break;

default:
//;
}
</script>
dicklee1214 2003-09-28
  • 打赏
  • 举报
 回复
有孟老大在，我是来学习的
topmonkey 2003-09-28
  • 打赏
  • 举报
 回复
---------------------------------------------------------------------------------
ChangeBackgroundColor_TD.htc
--------
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<SCRIPT LANGUAGE="JavaScript">
attachEvent ('onmouseover', overThis);
attachEvent ('onmouseout', outThis);

function cleanup()
{
detachEvent ('onmouseover', overThis);
detachEvent ('onmouseout', outThis);
}

function overThis()
{
if(event.srcElement.tagName == "TD"){
event.srcElement.style.background="#f0f0f0";
return;
}
}

function outThis()
{
if(event.srcElement.tagName == "TD"){
event.srcElement.style.background="#e7e7e7";
return;
}
}
</SCRIPT>

---------------------------------------------------------------------------------
ChangeBackgroundColor_TR.htc
--------
<PUBLIC:ATTACH EVENT="ondetach" ONEVENT="cleanup()" />
<SCRIPT LANGUAGE="JavaScript">
attachEvent ('onmouseover', overThis);
attachEvent ('onmouseout', outThis);

function cleanup()
{
detachEvent ('onmouseover', overThis);
detachEvent ('onmouseout', outThis);
}

function overThis()
{
if(event.srcElement.tagName == "TR"){
event.srcElement.style.background="#f0f0f0";
return;
}
if(event.srcElement.tagName == "TD"){
event.srcElement.parentElement.style.background="#f0f0f0";
return;
}
}

function outThis()
{
if(event.srcElement.tagName == "TR"){
event.srcElement.style.background="#e7e7e7";
return;
}
if(event.srcElement.tagName == "TD"){
event.srcElement.parentElement.style.background="#e7e7e7";
return;
}
}
</SCRIPT>
topmonkey 2003-09-28
  • 打赏
  • 举报
 回复
---------------------------------------------------------------------------------
styleItem.htc
--------
<script language=javascript>
switch(tagName)
{
case "INPUT":
switch(type)
{
case 'text':
style.border = "1px solid #9A9999";
style.backgroundColor = "#F8F8F8";
style.height = "18px";
style.font = "normal 12px 宋体";
style.color = "#000000";
break;

case 'password':
style.border = "1px solid #9A9999";
style.backgroundColor = "#F8F8F8";
style.height = "18px";
style.font = "normal 12px 宋体";
style.color = "#000000";
break;

case 'radio':
style.border = "0px";
style.backgroundColor = "transparent";
break;

case 'checkbox':
style.border = "0px";
style.backgroundColor = "transparent";
break;

case 'submit':
style.borderLeft = "1px solid #E8E8E8";
style.borderRight = "1px solid #696969";
style.height = "20px";
style.borderTop = "1px solid #E8E8E8";
style.borderBottom = "1px solid #696969";
style.backgroundColor = "#CCCCCC";
style.font = "normal 12px 宋体";
style.behavior = "url(../Include/ChangeBackgroundColor_BUT.htc)";

case 'reset':
style.borderLeft = "1px solid #E8E8E8";
style.borderRight = "1px solid #696969";
style.height = "20px";
style.borderTop = "1px solid #E8E8E8";
style.borderBottom = "1px solid #696969";
style.backgroundColor = "#CCCCCC";
style.font = "normal 12px 宋体";
style.behavior = "url(../Include/ChangeBackgroundColor_BUT.htc)";

case 'button':
style.borderLeft = "1px solid #E8E8E8";
style.borderRight = "1px solid #696969";
style.height = "20px";
style.borderTop = "1px solid #E8E8E8";
style.borderBottom = "1px solid #696969";
style.backgroundColor = "#CCCCCC";
style.font = "normal 12px 宋体";
style.behavior = "url(../Include/ChangeBackgroundColor_BUT.htc)";

default:
//;
}

case 'TABLE':
border = "1px";
cellPadding = "2px";
cellSpacing = "0px";
bgColor = "#e7e7e7";
borderColorLight = "#878787";
borderColorDark = "#FFFFFF";
break;

default:
//;
}
</script>
topmonkey 2003-09-28
  • 打赏
  • 举报
 回复
让你见识见识：
---------------------------------------------------------------------------------
test.htm
--------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//CN">
<HTML>
<HEAD>
<TITLE> Q2308582 </TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<META NAME="Generator" CONTENT="Microsoft Notepad">
<META NAME="Author" CONTENT="Topmonkey">
<META NAME="Description" CONTENT="Re: Q2308582 About CSS Dynamic Style">

</HEAD>
<style type="text/css" title="">
body {font-family: 宋体; font-size: 12px;}
table {font-family: 宋体; font-size: 12px;}
.changeBGCTr {behavior:url(ChangeBackgroundColor_TR.htc);}
.changeBGCTd {behavior:url(ChangeBackgroundColor_TD.htc);}
.styleItem {behavior:url(styleItem.htc);}
</style>

<BODY bgcolor="#FFFFFF" leftmargin="0" topmargin="0">
<table width="300" align="center" class=styleItem>
<tr class=changeBGCTr>
<td>aaaaaaaaaaaa</td>
<td>aaaaaaaaaaaa</td>
<td>aaaaaaaaaaaa</td>
</tr>
<tr class=changeBGCTr>
<td>aaaaaaaaaaaa</td>
<td>aaaaaaaaaaaa</td>
<td>aaaaaaaaaaaa</td>
</tr>
<tr class=changeBGCTd>
<td>bbbbbbbbbbbb</td>
<td>bbbbbbbbbbbb</td>
<td>bbbbbbbbbbbb</td>
</tr>
<tr class=changeBGCTd>
<td>bbbbbbbbbbbb</td>
<td>bbbbbbbbbbbb</td>
<td>bbbbbbbbbbbb</td>
</tr>
<tr class=changeBGCTd>
<td><Input Type="button" NAME="but" Value="Button" class=styleItem></td>
<td><Input Type="text" NAME="txt" Value="Text" class=styleItem></td>
<td><Input Type="radio" NAME="rdo" Value="Radio" class=styleItem><Input Type="checkbox" NAME="chk" Value="CheckBox" class=styleItem></td>
</tr>
</table>
</BODY>
</HTML>
xxrl 2003-09-28
  • 打赏
  • 举报
 回复
<style type="text/css">
TR {star : expression(onmouseover=function()
{this.style.backgroundColor="#FF6600"},
onmouseout=function(){this.style.backgroundColor="#4dfff"}) }
</style>
srj911 2003-09-28
  • 打赏
  • 举报
 回复
厉害
加载更多回复（7）
css入门笔记
1.css的概述 1.问题 HTML属性修饰有一定局限，是不太便捷 2.css的语法规范 1.使用css样式方式 1.内联样式 行内样式 特点：将css样式定义在HTML标记中 语法：中先增加一对<style></style>,在<style>标记写样式规则 样式规则：由选择器和样式声明组成 3.外部样式 独立于任何网页位置处，声明一个样式文件(.css为后缀)，在文件中声明样式，在使用的网页中引入.css文件。 使用步骤： 1.创建样式表文件（.css） 2.在样式文件中编写样式规则 3.在网页中对样式文件进行引入 <link rel="stylesheet" href="URL../.css"> 3.CSS样式特征 1.继承性 必须是父子（有层叠嵌套的关系）结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式（就近原则） 3.内联样式 4.!important; 绝对优先使用（） 格式 p{ color:red !important; } 2.css选择器 1.选择器的作用 规范页面中那些元素能够使用定义好的样式。 2.选择器详解 1.通用选择器 *{样式} 2.元素选择器 p{样式} 3.类选择器 1. 声明 .class名{样式} 2.引用可以引用多个类名用空格隔开 4.id选择器 #id名{样式} 3.特殊选择器 1.群组选择器 #id ,.class{样式} 1.子选择器 #id>.class{样式} 1.分类选择器 div .class{样式} 4.伪类选择器 作用：匹配元素不同状态的选择器 语法：所有的伪类都是以 : 作为开始 选择器：伪类选择器{样式} 伪类分类 1.伪类链接 :link 匹配尚未访问的超级链接状态 :visited 匹配访问过的元素的状态 2.动态伪类 :hover 匹配鼠标悬停在元素上时的状态
前端HTML,CSS,JavaScript,jQuery学习总结
可以称为标签。用<>括起来的一个特定的单词。标签分为单标签和双标签。单标签：双标签：标签中可以加入属性，双标签中可以继续嵌套标签。用HTML标签写出的文件保存为.html文件，称为页面文件什么是标签的属性在标签中，通过加入属性名="属性值" ,就可以让某个标签拥有指定的特征。<标签名 属性1="值" 属性2="值" >
Linux0.11内核初始化讲解与调试
结合bochs仿真调试工具边讲解边调试linux0.11版本内核初始化过程，通过该课程可以学习和理解关于linux内核在内存中的分布、分段及分页机制、逻辑地址线性地址及物理地址的区别，更系统的理解CPU实模式及保护模式等。...
jsp表格中实现鼠标放到某一行，使这行背景变色，移开时背景色还原。
思路：1、了解js获取表中tr。     2、了解鼠标移上、移出方法。             3、了解js中替换css中样式。 //获取tr         var rows = document.getElementsByTagName('tr'); //鼠标放在、或移出表格中某一行的效果。 for（int i=0;i if() }
ASP.NET程序中常用的三十三种代码
ASP.NET程序中常用的三十三种代码
1. 打开新的窗口并传送参数：
　　传送参数：
response.write("＜script＞window.open(’*.aspx?id="+this.DropDownList1.SelectIndex+"&id1="+...+"’)＜/script＞")
　　接收参数：
string a = Request.QueryString("id");
string b = Request.QueryStrin
ASP

28,390

社区成员

357,068

社区内容

发帖
与我相关
我的任务
社区描述
ASP即Active Server Pages，是Microsoft公司开发的服务器端脚本环境。
社区管理员
  • ASP
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章