前天在CSDN发帖问了关于鼠标移动改变底色而不受超链接影响的问题,浪迹天涯大哥给了下面的代码,确实有用,但是啊现在要求变了!我是个杯具的小白,代码连改都不会改。现在不仅是需要底色改变,还要有其他的动作,我没有JS基础,不知道怎么把.style.background = "Gray"进行改变,使其执行其他动作,比如改变文字大小啊,背景啊,或者干脆执行一个事先做好的CSS,谢谢大家了!
<html><head>
<title></title>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.style.background = "Red";
}
function MouseLeft() {
var div = document.getElementById("div");
div.style.background = "Gray";
}
</script>
</head>
<body>
<div style=" width:50px; height:20px; background-color:Gray" onmouseover="MouseUp()" onmouseout ="MouseLeft()" id="div">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
<html><head>
<title></title>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.style.background = "Red";
}
function MouseLeft() {
var div = document.getElementById("div");
div.style.background = "Gray";
}
</script>
</head>
<body>
<div style=" width:50px; height:20px; background-color:Gray" onmouseover="MouseUp()" onmouseout ="MouseLeft()" id="div">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
<html>
<head>
<title>test</title>
<style type="text/css">
.mouseover{color:white;background:red;width:150px; height:120px;line-height:25px;}
.mouseup{color:black;background:yellow;width:150px; height:120px;line-height:25px;}
</style>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.className='mouseover';
}
function MouseLeft() {
var div = document.getElementById("div");
div.className='mouseup';
}
</script>
</head>
<body>
<div onmouseover="MouseUp()" onmouseout ="MouseLeft()" id="div">
<a href="http://www.baidu.com">百度</a>
</div>
</body>
</html>
其他代码不用动。改这2个CSS文件的代码即可。
.mouseover{color:white;background:red;width:150px; height:120px;line-height:25px;}
.mouseup{color:black;background:yellow;width:150px; height:120px;line-height:25px;}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.mouseover{color:white;background:#c0c0c0;width:100px; height:100px;}
.mouseup{color:black;background:yellow;width:100px; height:100px;}
</style>
<script type="text/javascript">
function MouseUp() {
var div = document.getElementById("div");
div.className = 'mouseover';
div.innerHTML = "Google";
div.style.fontWeight = "bold";
}
function MouseOut() {
var div = document.getElementById("div");
div.innerHTML = "百度";
div.className = 'mouseup';
}
</script>
</head>
<body>
<div onmouseover="MouseUp()" onmouseout ="MouseOut()" id="div">百度</div>
</body>
</html>改了下!希望对你有帮助