は、どのように私は、保存ボタンを持っている

Question

「デフォルト」ボタンのスタイルを復元し、することができ、それを介してユーザマウスを置いたが、私はいくつかのスタイルを変更するとき - 例えば：マウスがボタンの葉

$('.saveButton').mouseover(function() { 
    $(this).css("background-color", "red"); 
    $(this).parents('fieldset').css("border", "2px solid red"); 
}); 

、Iオリジナルを復元したいと思います：

しかし

$('.saveButton').mouseout(function() { 
    $(this).css("background-color", "#EEE"); 
    $(this).parents('fieldset').css("border", "1px solid gray"); 
}); 

、デフォルトボタンの背景色は、このコードが実行されると、ボタンはその丸みを帯びた外観を失い、直角の角を持って、#EEEであるかどうかの問題を脇に残して。

これは可能ですか？それからちょうど親フィールドセットに削除/このクラスを追加

/* in style.css */ 
.over { 
    border: 2px solid red; 
} 
.over .saveButton { 
    background-color: red; 
} 

：

Answer 1

私が直接プロパティを設定しないことをお勧めが、代わりにクラス/クラスを設定します：

$('.saveButton').mouseover(function() { 
    $(this).addClass('highlight'); 
    $(this).parents('fieldset').addClass('highlight'); 
}).mouseout(function() { 
    $(this).removeClass('highlight'); 
    $(this).parents('fieldset').removeClass('highlight'); 
}); 

を

.saveButton.highlight { /* Double class selector is broken in IE6 */ 
    background-color: red; 
} 

fieldset.highlight { 
    border: 1px solid red; 
} 

では、何らかの理由であなたがそれを行うにはしたくない場合は、プロパティを特定の値に設定するのではなく、空の文字列に設定します。それは、そのプロパティを「削除」する必要があります

$('.saveButton').mouseout(function() { 
    $(this).css("background-color", ""); 
    $(this).parents('fieldset').css("border", ""); 
}); 

Answer 2

はい、クラスといくつかのCSSを使用し

$('.saveButton').mouseover(function() { 
    $(this).parents('fieldset').addClass('over'); 
}).mouseout(function() { 
    $(this).parents('fieldset').removeClass('over'); 
}); 

クラスを削除するボタンやフィールドの状態を元に戻すします彼らはその前でした。良いプラクティスとして

---

- それはそのように管理することがはるかに簡単だ - CSSで（物事がどのように見えるか）、プレゼンテーションを維持し、それらを切り替えるためにJavaScriptを使用することをお勧めします。

Answer 3

あなたの最高のベッドは、マウスオーバーで追加するスタイルのCSSクラスを作成し、 "addClass"を使用してjQueryで追加することです。次に、 "removeClass"を使って一時的なスタイルを削除するだけです。

Answer 4

はい、あなたは赤で、BG色と境界線の色を作るのMouseEnterためのクラスを設定することができます。

イベントに対してtoggleClassを使用すると、イベントを切り替えてクラスを追加および削除し、常にデフォルトのボタンに戻すことができます。

Answer 5

これは、CSS :hover疑似クラスにはるかに適しています。そして、はるかに速くjavascriptよりも。

.fieldset-class:hover { border: 2px solid red;} 
.saveButton:hover { background-color:red;} 

mouseover/mouseoutイベントでCSSを変更するだけでよい場合は、この方法を使用してください。

実際には:hoverのlive example from Soh Tanakaです。バーのポップアップツールチップ？純粋なCSS。

更新
問題モデルに関連してCSSに欠陥があります。これにより、ボタンをホバーしていなくても、フィールドセットのホバーが起動します。私はCSSで2番目の行.saveButton:hoverを使用し、他の答えが指摘しているようにクラスを使用して、フィールドセットのホバーにJavaScriptを使用します。

これが最善の解決策である