<div align="right" style="border:1 #FF0 solid; background-color:#999" onMouseOver="javascript: function(){this.style.backgroundColor = '#DDD';}" onMouseOut="javascript: function(){this.style.backgroundColor = '#999';}">
Register
</div>
当鼠标悬停事件触发时,会出现此错误:
未捕获的SyntaxError:意外 令牌(
我该怎么办?我想在onMouseOver
和onMouseOut
答案 0 :(得分:5)
请勿使用function
声明,只需执行:
onMouseOver = "this.style.backgroundColor = '#DDD';"
和
onMouseOut = "this.style.backgroundColor = '#999';"
顺便说一下,您应该考虑 unobstrusive javascript 。
答案 1 :(得分:1)
为什么要在场景中使用某个功能?你可以使用..
onMouseOut =“javascript:this.style.backgroundColor ='#999'”&gt;
答案 2 :(得分:1)
你应该看看jQuery并使用不引人注目的javascript。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
这就是你所需要的,它将把jQuery库从谷歌中拉出来。
然后,您可以使用外部样式表来处理您想要执行的操作。
<div id="container"> Register </div>
您需要创建一个外部样式表,例如app.css:
#container {border:1 #FF0 solid; background-color:#999;text-align:left;}
然后你可以有一个外部脚本,如app.js
$('#container').mouseout(function() {
$('#container').css('backgroundColor', '#DDD')
});
不要忘记将外部css和js链接到页面。外部样式表需要在jQuery脚本之后链接。
http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="app.css">
当鼠标执行操作时,您可以编辑脚本以添加更多功能:
$('#container').mouseout($('#container').css('backgroundColor', '#DDD'))
$('#container').mouseover($('#container').css('backgroundColor', '#DDD'))
$('#container').mouseenter($('#container').css('backgroundColor', '#DDD'))
$('#container').mouseup($('#container').css('backgroundColor', '#DDD'))
这里有一大堆主题:http://api.jquery.com/category/events/mouse-events/
答案 3 :(得分:1)
为什么不用css?
}
或者它是你需要的js函数而bg只是一个例子?...在这种情况下你可以用jQuery获得一个简单的结果 $( “#元素”)。鼠标指向(函数(){ $(本).addClass( “bghover”); });
$( “#元件”)。mouseoutfunction(){ $(本).removeClass( “bghover”); });
答案 4 :(得分:0)
您可以定义外部javascript方法,该方法接受所需的参数,并将此方法用于多个元素:
<script language="javascript" type="text/javascript">
function OnMouseDownEventHandler(sender) {
sender.style.backgroundColor = '#DDD';
}
</script>
<div onmousedown="OnMouseDownEventHandler(this);"></div>