[英]onMouseOver change background image position
I'm trying to reposition the background image of a div using javascript. 我正在尝试使用javascript重新定位div的背景图像。 Here's what I have but it doesn't seem to work. 这是我所拥有的,但似乎不起作用。 What am I missing? 我想念什么?
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition="0px 150px"">link one</a>
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition="0px 350px"">link two</a>
<div id="rubbish_image"></a>
I'm not entirely sure, but there's two obvious problems I can see with your JavaScript: 我不确定,但是您的JavaScript有两个明显的问题:
"
just before the closing >
of the a
tags, as a result of 您会在a
标签的结束>
之前有两个 "
"
inside of the string, which isn't allowed (you can use '
inside a string delimited with "
, or vice versa, but "
inside of a string delimited by "
terminates the string). 您使用的"
字符串,这是不允许的里面 (你可以用'
与分隔的字符串内"
反之亦然,但"
被分隔字符串里"
终止字符串)。 I'd suggest, therefore, amending the code to: 因此,我建议将代码修改为:
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 150px';">link one</a>
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 350px';">link two</a>
I don't believe it's a huge problem, but you also didn't terminate your JavaScript within the onmouseover
attribute, so I also added the ;
我不认为这是个大问题,但是您也没有在onmouseover
属性内终止JavaScript,因此我还添加了;
to the end of each. 到每个结尾。
You're nesting double quotes, which won't work. 您嵌套的双引号不起作用。
A simple fix is to only use single quotes inside the onmouseover
attributes: 一个简单的解决方法是仅在onmouseover
属性内使用单引号:
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 150px'">link one</a>
<a href="#" onMouseOver="document.getElementById('rubbish_image').style.backgroundPosition='0px 350px'">link two</a>
<div id="rubbish_image"></a>
You're already doing this inside getElementById
. 您已经在getElementById
进行了此操作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.