javascript - 使用 onmouseover 事件更改 backgroundPosition

Question

我需要一点帮助。我遇到了一个问题，当列表中的一个链接被鼠标悬停时——你猜对了——试图调用 block 元素的 backgroundPosition 的变化。关键在于:它需要在外部 .js 文件中可行(内联 JS 看起来真的很乱而且不专业，恕我直言)。到目前为止，我看到的所有解决方案要么过于简单(由于分离的元素，纯 CSS 解决方案将无法工作)，要么使用了我还不习惯的东西(这意味着没有 jQuery，谢谢)。

我想要的是类似 if-else 语句的东西(如果可能的话。如果没有，下一个最接近的东西会做)，它看起来/执行类似的东西:

var block = document.getElementById('block');
if (onmouseover *link1*) {
    block.style.backgroundPosition='-200px 0px';
} else if (onmouseover *link2*) {
    block.style.backgroundPosition='-400px 0px';
} else if (onmouseover *link3*) {
    block.style.backgroundPosition='0px -200px';
}

如果需要任何其他代码部分，我会尽可能提供。提前致谢!

编辑:明确地说，我不是在要求整个 JS 程序(我不是那么笨...)，只是我将如何让 if 语句识别一个元素已被鼠标移动 -并相应地修改另一个，因为到目前为止我的所有尝试都失败了。

Answer 1

我认为您正在将非常简单的事情变得过于复杂。

这是你想要得到的吗？根本不需要 javascript。

查看 JSFiddle: http://jsfiddle.net/ionko22/fjTUA/

基本 HTML

<a id="hover-me1">Link 1</a>
<a id="hover-me2">Link 2</a>
<a id="hover-me3">Link 3</a>

<div id="change-my-background"></div>

和基本 CSS

#hover-me1:hover ~ #change-my-background{
    background:#aa3233 url(http://i.imgur.com/DMv02cc.jpg) repeat-x -200px -200px;
}

#hover-me2:hover ~ #change-my-background{
    background:#aa3233 url(http://i.imgur.com/DMv02cc.jpg) repeat-x -400px -200px;
}

#hover-me3:hover ~ #change-my-background{
    background:#aa3233 url(http://i.imgur.com/DMv02cc.jpg) repeat-x -600px -200px;
}

#change-my-background {
    width:300px;
    height:300px;
}