Javascriptロールオーバーを使用したクラスの追加

ユーザーがロールオーバーするときにのみ表示される画像のクラスontopを追加したいとします。Javascriptロールオーバーを使用したクラスの追加

作業例としてこれを参照してください：あなたは、画像とテキストの水平方向のリストに気づくでしょう

http://www.warface.co.uk/clients/warface.co.uk/ （CLICKトップの赤い矢印）、所望の効果が一覧表示されますすべての画像とテキスト付きの黄色のブロックがロールオーバー効果になります。

<li><a class="project-thumb"><img src="images/_scroll1s.jpg" alt=""> 
    The London Police</a></li> 
    <li><div class="project-thumb"> 
     <div class="content"> 
      <h2>The London Police</h2></a> 
      <a class="view-project">View Project</a> 
       </div><!--content END --> 
        </div><!--project-thumb END --> 
        </li></ul>

CSSはjavascriptが置換効果のために正しいマークアップにアドバイスしてくださいでした。

多くのありがとうございます

出典

2011-01-04 Rob

あなたはこのような何かを追加

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

：グーグルCDNからいずれかを使用しますユーザーがイメージの上を移動するときに.stop（）を使用すると、アクションはキューに入れられません。 – Cristy

jQueryのようなjavascriptライブラリを使用することをお勧めします。 jQueryを使用すると、ホバーイベントでクラスを変更することが非常に簡単になります。

<head>タグにjqueryを追加します。

<script> 
$(document).ready(function() { 
    // find the image inside the link with the class project-thumb and add a hover event 
    $("a.project-thumb img").hover(
    function() { 
     // add a class to the closest li. $(this) is the image 
     $(this).closest('li').addClass('theClassYouWantToAdd'); 
    }, 
    function() { 
     $(this).closest('li').removeClass('theClassYouWantToRemove'); 
    } 
); 
}); 
</script>

ホバリングイベントのドキュメント：動作するはずhttp://api.jquery.com/hover/

出典

2011-01-04 11:35:13

このアダムのおかげで、非常に明確で簡潔なものを探していました。 – Rob

問題はありません。お力になれて、嬉しいです。 :) –

Javascriptロールオーバーを使用したクラスの追加

答えて

関連する問題