JQuery：ホバー解除せずにホバー

Question

私は、jQueryの要素にホバー属性を置くための愚かな方法について驚いています。このサンプルのCSSを見てみましょう：

div.test 
{ 
    width: 20px; 
    height: 20px; 
    color: #000000; 
    background: #FFFFFF; 
} 
div.test:hover 
{ 
    color: #FFFFFF; 
    background: #CC0000; 
} 

我々はjQueryのにこれを変換したい場合は、我々は次のように入力する必要があります。

$('div.test').css({ 
    'width' : '20px', 
    'height' : '20px', 
    'color' : '#000000', 
    'background' : '#FFFFFF' 
}); 
$('div.test').hover(function() { 
    $(this).css({ 
     'color' : '#FFFFFF', 
     'background' : '#CC0000' 
    }); 
}, function() { 
    $(this).css({ 
     'color' : '#000000', 
     'background' : '#FFFFFF' 
    }); 
}); 

これを行うには、任意のより良い方法があるArn't ？明白なことを書くのはばかげている。

ありがとうございます。

Answer 1

これは間違った方法です。

$.fn.easyHover = function(cssProps){ 
    return this.each(function(){ 
     var $t = $(this); 
     var oldProps = {}; 
     for(x in cssProps) 
      oldProps[x] = $t.css(x); 
     $t.hover(function(){ 
      $(this).css(cssProps); 
     }, function(){ 
      $(this).css(oldProps); 
     }); 
    } 
} 

あなたは、このようにそれを使用することができます。また、あなたはちょうどあなたが（自動unhovering）やりたいするには、次の簡単なプラグインを書くことができますので、

.highlighted 
{ 
    color: #FFFFFF; 
    background: #CC0000; 
} 

$('div.test').hover(function() { 
    $(this).addClass('highlighted'); 
}, function() { 
    $(this).removeClass('highlighted'); 
}); 

Answer 2

のようなCSSクラスを定義したいです：

$('#elem').easyHover({color:'#000', background:'#ccc'}); 

しかし、Praveenの答えはdefenitly行く方法です。

Answer 3

あなたが誤って考えているのは、jQueryがCSSを置き換えることです。

jQueryは「ホバータグを追加しません」というJavaScriptのホバーイベント（IIRCは実際にはmouseover/mouseoutの抽象化）のハンドラーを提供するだけです。 JSでCSSのホバー擬似セレクターをエミュレートする場合、jQueryを使用すると、使いやすいイベントハンドラーバインディングを簡単に作成できます。

Answer 4

私が行くための別の方法は、次のようになりますと仮定します。

// In you stylesheet, just define the default properties 
div.test 
{ 
    width: 20px; 
    height: 20px; 
} 

その後、あなたは

var hoverHelper = (function() { 
    var styles = { 
     hoverStyle: { 
     'color' : '#FFFFFF', 
     'background' : '#CC0000' 
     }, 
     defaultStyle: { 
     'color' : '#000000', 
     'background' : '#FFFFFF' 
     } 
    }; 

    return { 
     init: function (selector) { 
     $(selector).hover(
      function() { 
       $(this).css(styles.hoverStyle); 
      }, 
      function() { 
       $(this).css(styles.defaultStyle); 
      } 
     ); 
     } 
    }; 
}()); 

hoverHelper.init('.hoverElementClass'); // Apply the hover functions 
             // to all matching elements 

をこのように使用するプロパティを保持する単純なオブジェクトラッパーを作成し、少なくともあなた1つの場所にスタイル定義を保持する。