0

少し助けが必要です。リストからの1つのリンクが（ご想像のとおり）マウスオーバーされたときに、ブロック要素の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プログラム全体を求めているのではなく（私はそれほど馬鹿ではありません...）、1つの要素がマウスオーバーされたことを認識して変更する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 に答える