私がホバーしたリスト項目に応じて画像を変えようとしています。jQueryを使用して画像を変更しますか？
私はulを含むコンテナを持っています。私は3つのリストアイテム（小さな水平ナビゲーション）を持っています。リストアイテムはコンテナの底に座っていて、リの上に空のスペースが残っています。私は、リストの上にある空アイテムの上に空のスペースを置いてイメージを変更したい。 3種類の画像があるか、CSSスプライトを使用しています。
これをjQueryで行う方法はありますか？
これにはjQuery UI Tabsプラグインを使用できます。ちょっと残忍かもしれませんが、うまくいくでしょう。明らかにあなたがしたいでしょうが、（私がテストしてみたし、それが動作します）役立つかもしれない超迅速なデモです。ここ
$('.selector').tabs({ event: 'mouseover' });
：あなたはこのように、代わりにホバーになるようにタブを選択するために使用されるイベントを変更することができます
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Tabs Test</title>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/themes/redmond/jquery-ui.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){
$('#tabs').tabs({ event: 'mouseover' });
});
//]]>
</script>
</head>
<body>
<div id="tabs">
<div id="tabs-1">
<img src="images/image1.jpg" alt="image1" />
</div>
<div id="tabs-2">
<img src="images/image2.jpg" alt="image2" />
</div>
<div id="tabs-3">
<img src="images/image3.jpg" alt="image3" />
</div>
<ul>
<li><a href="#tabs-1">Nunc tincidunt</a></li>
<li><a href="#tabs-2">Proin dolor</a></li>
<li><a href="#tabs-3">Aenean lacinia</a></li>
</ul>
</div>
</body>
</html>
HTML：：
<div id="container">
<img id="yourImg" src="spacer.gif" width="..." height="...">
<ul id="yourUL">
<li data-imageswap="someimg.png">One</li>
<li data-imageswap="another.png">Two</li>
<li data-imageswap="andathird.png">Three</li>
</ul>
</div>
スクリプト：
$('li','#yourUL').hover(function(){
$('#yourImg').attr('src',this.getAttribute('data-imageswap'));
}
data属性（classNameまたはidなど）以外のものを使用してイメージを指すこともできますが、それはその要点です。
イメージに透明な1x1 gifを貼り付けると、必要な幅と高さに拡大縮小できます。代わりに、画像なしで開始して、DOMなしで始めたい場合はDOMに書き込むことができます。
ナッツ＆スレッジハンマースプリングを心に留めてください。なぜあなたは彼が望むものにタブを使用しますか？ – redsquare
これは基本的に同じ機能（リストの項目を表示して関連するコンテンツを表示/非表示にする）なので、特に知識がない場合は簡単に実装できます（特にjQuery UIをサイトで実行している場合）。 もちろん、彼はコードを投稿していないので、彼の正確な状況は本当にわかりません。彼はそれを行うことができる100の異なる方法があります、これはただ一つです。 彼が実際に私に望むものに応じて、好みの方法は純粋なCSSソリューションになります。 –