js初心者です。
下記のような記述をしておりまして、クラス名「hoge-name」のテキストをクリックすると「hoge-inner」のbackgroundが切り替わる
仕様を作成しております。
現在、クリック、ホバー場合に、初期設定のimg02.gifから各リンク先の画像に切り替わるというところまでは実装できております。
ですが、マウスをはずした後についてはホバーの解除が出来ず、最後にホバーした画像のままになってしまいます。
解除の方法をいろいろ調べたのですが、うまく行きません。
また、クリックした際にhoge-nameのcolor、weightを変更したいのですが、こちらもうまく実装できませんでした。
初歩的なところで詰まってしまっているのは重々承知しているのですが、
ご教示いただけると幸いです。
よろしくお願いいたします。
<style type="text/css"> .hoge-inner { background: url('../img/img01.gif') no-repeat center top; </style> <div class="hoge"> <div class="hoge-inner"> <a href="img/img02.gif" class="hoge-name link01">リンク1</a> <a href="img/img03.gif" class="hoge-name link02">リンク2</a> <a href="img/img04.gif" class="hoge-name link03">リンク3</a> </div> </div> <script type="text/javascript"> $('.hoge-name').click(function(){ var bglink = $(this).attr("href"); $("div.hoge-inner") .css("background-image","url("+bglink+")"); return false; }); $('.hoge-name').hover(function(){ var bglink = $(this).attr("href"); $("div.hoge-inner") .css("background-image","url("+bglink+")"); return false; }); </script>
回答1件
あなたの回答
tips
プレビュー