使用onmouseover事件更改backgroundPosition

我需要一些幫助。當列表中的一個鏈接是你猜對了的時候，我遇到了一個嘗試調用block元素的backgroundPosition中的更改的問題。這裏是踢球者：它需要在外部.js文件中可行（內聯JS看起來非常混亂和不專業的imho）。到目前爲止，我所見過的所有解決方案要麼太簡單（因爲分離的元素，僅CSS解決方案將無法工作），要麼使用我不熟悉的東西（這意味着沒有jQuery，謝謝）。使用onmouseover事件更改backgroundPosition

我想什麼是沿着一個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語句來認識到一個元素已被挖出因爲到目前爲止我所有的嘗試都遇到了失敗。

來源

2013-02-26 JGeorge

您應該使它與CSS工作。僅僅爲了文體變化而使用JavaScript是凌亂和不專業的。 – 2013-02-26 18:51:26

你可以將你的代碼發佈到jsfiddle或jsbin – 2013-02-26 18:52:10

@MichaelIrigoyen是對的，在JavaScript中執行它可能無法在某些瀏覽器中工作。 – 2013-02-26 18:55:09

我覺得你正在做一些相當簡單的事情，太複雜了。

這是你想要得到的嗎？根本不需要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-26 20:00:17

我真的不知道這甚至可以用CSS。謝謝！ – JGeorge 2013-02-26 20:19:25

使用onmouseover事件更改backgroundPosition

回答

相關問題