Question

我需要一些帮助。我遇到了一个问题，当列表中的一个链接是 - 你猜对了 - 试图调用块元素的backgroundPosition时，它会被调用。这是踢球者：它需要在外部.js文件中可行（内联JS看起来非常混乱和不专业的imho）。到目前为止我看到的所有解决方案都太简单了（仅限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;
}

使用onmouseover事件更改backgroundPosition

1 个答案: