javascript - javascriptでDIV IDを使用してDIVにホバー効果を持たせるにはどうすればよいですか?

Question

div id を使用して、各 div に異なるホバー効果を持たせたいと考えています。出来ますか？私はしばらくグーグルで検索してきましたが、クラス名とタグを使用したホバー効果だけが表示されます。javascriptまたはjqueryを使用してこれを行いたいです。どんな助けでも大歓迎です、ありがとう!

Answer 1

id関数内で from を評価できます。

$(".hoverItems").hover( overState, outState );

function overState () {
  switch ( this.id ) {
    case "foo" :
      /* effect a */
      break;
    case "bar" :
      /* effect b */
  }
}

function outState () {
  switch ( this.id ) {
    case "foo" :
      /* undo effect a */
      break;
    case "bar" :
      /* undo effect b */
  }
}

デモ: http://jsbin.com/evikog/edit#javascript,html

Answer 2

JQuery を使用すると、アクションを mouseEvent にバインドできます: http://api.jquery.com/category/events/mouse-events/

イベントをdivにバインドしてアニメーションを実行するだけです...

$("#foo,#bar").hover( overState, outState );

function overState () {
      /* effect */
}

function outState () {
      /* undo effect */
}

複数の div をアニメーション化する場合は、それらにクラスを与えます。たとえば、「アニメーション」:

HTML :

<div class="animated">blabla</div>

Javascript

$(".animated").hover( overState, outState );

そうすれば、アニメーション化されたクラスを持つすべての div にアニメーションが表示されます。

Answer 3

特定のスタイルの class+id の組み合わせで css を使用できます