マウスオーバー状態を持続する方法について

質問

• 背景画像をマウスオーバーで「noneimage」に設定し、マウスアウト後も画像が消えたままにしたい場合、どのようにすれば良いか質問しています。
• 現在はCSSの「:hover」を使用して背景画像を非表示にしていますが、カーソルがそれた時点で背景画像が表示されてしまうという問題があります。
• 経験が浅いため、CSSかjQueryのどちらを使用すれば良いかわからない状況で、例を教えていただきたいと質問しています。

回答No.4

e_watt

マウスが乗っかったら、クラスをどーんと変えてしまうのはどうでしょう。
マウスがいなくなってもクラスは変えられたままです。

<style type="text/css">
.xlist { /* 元のクラス */
　　background-image: url('./bg.png');
}

.keepNoImage { /* 背景なしのクラス */
　　background-image: none;
}
</style>

<script type="text/javascript">
function classChange(obj,newName) { // objのクラスをnewNameに変えちゃう
　　obj.className = newName;
}
</script>

<hx>CATEGORY</hx>
<!--　　　最初は'背景付き'、 マウスが乗ると、(自分を, '背景なしのまま'クラスに)変身させる -->
<ul id="QQ" class="xlist" onMouseOver = "classChange(this,'keepNoImage');">
　　<li><a href="Link01">Link01</a></li>
　　<li><a href="Link02">Link02</a></li>
　　<li><a href="Link03">Link03</a></li>
　　<li><a href="Link04">Link04</a></li>
</ul>

<div onClick="classChange(document.getElementById('QQ'),'xlist');">
ここをクリックすると元通り？（リロードしても元通りですが）
</div>

お礼

回答ありがとうございます。

なるほどなるほど！
がっつり変えてしまうのもありですね～。

サブカテゴリがドロップダウンのアクションなので
どんな感じの表現になるかちょっと試してみます。

ありがとうございます！