jquery - ホバー状態に適用される CSS の変更

Question

jQuery を介して要素のホバー状態に適用される既存のスタイルをどのように変更できるのか疑問に思っています。

例えば：

.button { color:red; }
.button:hover { color:blue; }

font-size:14px;にスタイルを適用したいと思います.button:hover。font-size の値は、ユーザーが以前に操作したページ上の他の要素によって異なります。

Answer 1

:hover技術的にスタイルは DOM の一部ではないため、JavaScript を使用してスタイル (またはその他の疑似クラス) を変更することはできません。

これらのスタイルを CSS の別のクラスに追加し、JavaScript/jQuery を使用してそのクラスを追加/削除する必要があります。

CSS:

.button.bigger { font-size:14px; }

jQuery:

$('.button').on('hover', function(e) {
    $(this).toggleClass('bigger');
});

Answer 2

cssでこれはどうですか：

.button:hover { color:blue; font-size:14px;}

そしてjQueryで：

 $('.button').hover(function(){
    $(this).css({"font-size":"14px"}); // increases on mouseover
 },function(){
    $(this).css({"font-size":"12px"}); // decreases on mouseout
 });

Answer 3

jQuery でイベント ハンドラーを作成するか、CSS でクラス固有のホバーを作成する必要があります。

両方の実際の例を次に示します。

http://jsfiddle.net/dboots/GHzSs/

JS:

$('#large').hover(function(e) {
        var t = $(this);
        t.css('fontSize', '14px');
}, function(e) {
        var t = $(this);
        t.css('fontSize', '11px');
});​

HTML:

<div class="button">Regular Button</div>
<div class="button large">Large Button (by class/css)</div>
<div class="button" id="large">Large Button (by id/jquery)</div>​

CSS:

.button {
    padding: 5px;
    border: 1px solid #999999;
    width: 250px;
    margin: 5px 0;
}

.button:hover {
    border: 1px solid #000000;
}

.large:hover {
    font-size: 14px;
}

Answer 4

ボタンにいくつかのクラスまたはIDを追加します..jqueryを使用してそれをターゲットにし、それにcssを追加します。

例えば

$('.buttonToBeChanged').on('hover',function(){
    $(this).css('font-size',14);
});

それはすべきです。これを参照してください。http://api.jquery.com/css/

EDIT : その後、コードはフォントを 14px に設定します。ホバーアウトした後でも。トグル効果を与えるには、@Blazemonger による回答を使用してください。それで結構です。または、mouseenterおよびmouseoutイベントを使用できます

EDIT AGAIN - @Jaiが述べたように、CSSも単独で仕事をします。

.button:hover { color:blue; font-size:14px;}