0

我需要一点帮助。当列表中的一个链接（您猜对了）鼠标悬停时，我遇到了尝试调用块元素的 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 语句识别一个元素已被鼠标悬停并修改另一个相应的，因为到目前为止我所有的尝试都失败了。

4

1 回答 1

0

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

这是你想要得到的吗？根本不需要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;
}
于 2013-02-26T20:00:17.770 回答