怎么让鼠标经过变换CSS样式呢？

kskkdjj 2011-04-29 12:26:00

怎么在鼠标经过后变成mmx的样式？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#mmn{
height: 20px;
width: 50px;
margin-top: 20px;
background-color: #99CCCC;
}
#mmx{
font-size: 16px;
color: #0099FF;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div id="mmn" onMouseOut=bian();>我的</div>
</body>
<script type="text/javascript">
function bian()
{
}
</script>
</html>

...全文

462 21 打赏收藏转发到动态举报

写回复

用AI写文章

21 条回复

切换为时间正序

请发表友善的回复…

发表回复

静石 2011-04-29

打赏
举报

[Quote=引用 15 楼 kskkdjj 的回复:]
引用 14 楼 cl_stock 的回复:
一般在事件上不用写是可以的
在比如说<a href=后面是要写的

是不是这样写呢？
<div id="mmn" onmouseover = javascript：document.getElementById("mmn").className="mmx";
>我的</div>
[/Quote]
我刚测试了下没有问题啊？

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 14 楼 cl_stock 的回复:]
一般在事件上不用写是可以的
在比如说<a href=后面是要写的
[/Quote]
是不是这样写呢？
<div id="mmn" onmouseover = javascript：document.getElementById("mmn").className="mmx";
>我的</div>

静石 2011-04-29

打赏
举报

一般在事件上不用写是可以的
在比如说<a href=后面是要写的

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 12 楼 cl_stock 的回复:]
引用 10 楼 kskkdjj 的回复:
引用 2 楼 cl_stock 的回复:
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";

是直接写进html里面这样写是嘛？

是的
[/Quote]
但是我直接写是错误的呢。
<div id="mmn" onmouseover = javascript：document.getElementById("mmn").className="mmx";
>我的</div>

静石 2011-04-29

打赏
举报

[Quote=引用 10 楼 kskkdjj 的回复:]
引用 2 楼 cl_stock 的回复:
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";

是直接写进html里面这样写是嘛？
[/Quote]
是的

zell419 2011-04-29

打赏
举报

[Quote=引用 10 楼 kskkdjj 的回复:]

引用 2 楼 cl_stock 的回复:
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";

是直接写进html里面这样写是嘛？
[/Quote]
不需要加javascript:。

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 2 楼 cl_stock 的回复:]
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";
[/Quote]
是直接写进html里面这样写是嘛？

toury 2011-04-29

打赏
举报

[Quote=引用 8 楼 kskkdjj 的回复:]

引用 2 楼 cl_stock 的回复:
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";

javascript：document.getElementById("mmn").className="mmx";
能告诉我这语句是个什么……
[/Quote]
可以不写。它是告诉引擎，后面的是JS

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 2 楼 cl_stock 的回复:]
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";
[/Quote]
javascript：document.getElementById("mmn").className="mmx";
能告诉我这语句是个什么意思不？谢谢！
我没过这种写法。

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 3 楼 hongmei85 的回复:]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Conten……
[/Quote]
这样设置多个CSS参数代码很麻烦呢，而且也不好调试。。。
能不能直接改变他的ID或者class呢？跟2楼那样的。

licip 2011-04-29

打赏
举报

你用class会更好，扩展性也强。[Quote=引用 2 楼 cl_stock 的回复:]
用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";
[/Quote]

静石 2011-04-29

打赏
举报

把id给改了

document.getElementsByTagName('div')[0].id = 'mmx';

oggmm 2011-04-29

打赏
举报

function bian(){
document.getElementById(mmn).style.color="#FFFFFF";
}

hongmei85 2011-04-29

打赏
举报

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#mmn{
height: 20px;
width: 50px;
margin-top: 20px;
background-color: #99CCCC;
}
#mmx{
font-size: 16px;
color: #0099FF;
}
</style>
<title>无标题文档</title>
</head>

<body>
<div id="mmn" onMouseOver="bian(this)">我的</div>
</body>
<script type="text/javascript">
function bian(obj)
{
obj.style.fontSize="16px";
obj.style.color="#0099ff";
}
</script>
</html>

静石 2011-04-29

打赏
举报

用class设置css样式:mmx前面的"#"改成"."
onmouseover = javascript：document.getElementById("mmn").className="mmx";

zell419 2011-04-29

打赏
举报



document.getElementById("mmn").style.fontSize="20px";

document.getElementById("mmn").style.color="#0099FF";

事件应该是mouseover()吧。out移出。

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 20 楼 kskkdjj 的回复:]
引用 17 楼 cl_stock 的回复:
HTML code

怎么在鼠标经过后变成mmx的样式？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://……
[/Quote]
我看不行，感觉在吹毛求疵。 :)

kskkdjj 2011-04-29

打赏
举报

[Quote=引用 17 楼 cl_stock 的回复:]
HTML code

怎么在鼠标经过后变成mmx的样式？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">……
[/Quote]
onMouseOver="javascript:document.getElementById('mmn').className='mmx';"
这里能做修改精简下不？感觉要找的ID就在这个元素里还去document.getElementById感觉有点浪费，可以不去找ID而是改成当前元素的ID吗？

静石 2011-04-29

打赏
举报

上面有些错误
这个你测试下



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<style>

.mmn{

height: 20px;

width: 50px;

margin-top: 20px;

background-color: #99CCCC;

}

.mmx{

font-size: 16px;

color: #0099FF;

}

</style>

<title>无标题文档</title>

</head>



<body>

<div id="mmn" class="mmn" onMouseOut="javascript:document.getElementById('mmn').className='mmn';" onMouseOver="javascript:document.getElementById('mmn').className='mmx';"

>我的</div>

</body>



</html>

KeepMoving 2011-04-29

打赏
举报

[Quote=引用 1 楼 zell419 的回复:]
HTML code

document.getElementById("mmn").style.fontSize="20px";
document.getElementById("mmn").style.color="#0099FF";
事件应该是mouseover()吧。out移出。
[/Quote]++