マウスオーバーで背景色を変更し、マウスアウト後に背景色を削除します
質問
どのクラスが該当するかというテーブルがあります forum
. 。私のjQueryコード:
<script type="text/javascript">
$(document).ready(function() {
$('.forum').bind("mouseover", function(){
var color = $(this).css("background-color");
$(this).css("background", "#380606");
$(this).bind("mouseout", function(){
$(this).css("background", color);
})
})
})
</script>
それは完全に機能しますが、次のことを行わずにより効率的な方法でそれを行うことは可能ですか? var color = $(this).css("background-color");
. 。すぐ後 mouseout
以前の背景色を残して削除します #380606
?ありがとう。
解決
IE ≤6 を気にしない場合は、純粋な CSS を使用できます。
.forum:hover { background-color: #380606; }
.forum { color: white; }
.forum:hover { background-color: #380606 !important; }
/* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/ */
#blue { background-color: blue; }
<meta charset=utf-8>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
jQuery を使用する場合は、通常、このスタイル用の特定のクラスを作成することをお勧めします。
.forum_hover { background-color: #380606; }
次に、マウスオーバー時にクラスを適用し、マウスアウト時にクラスを削除します。
$('.forum').hover(function(){$(this).toggleClass('forum_hover');});
$(document).ready(function(){
$('.forum').hover(function(){$(this).toggleClass('forum_hover');});
});
.forum_hover { background-color: #380606 !important; }
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
クラスを変更できない場合は、元の背景色を次の場所に保存できます。 .data()
:
$('.forum').data('bgcolor', '#380606').hover(function(){
var $this = $(this);
var newBgc = $this.data('bgcolor');
$this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
});
$(document).ready(function(){
$('.forum').data('bgcolor', '#380606').hover(function(){
var $this = $(this);
var newBgc = $this.data('bgcolor');
$this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
});
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
または
$('.forum').hover(
function(){
var $this = $(this);
$this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
},
function(){
var $this = $(this);
$this.css('background-color', $this.data('bgcolor'));
}
);
$(document).ready(function(){
$('.forum').hover(
function(){
var $this = $(this);
$this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
},
function(){
var $this = $(this);
$this.css('background-color', $this.data('bgcolor'));
}
);
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
他のヒント
CSS ファイルに元の背景色を設定します。
.forum{
background-color:#f0f;
}
jQuery で元の色をキャプチャする必要はありません。jQuery はスタイルを INLINE で変更するため、background-color を null に設定しても同じ結果が得られることに注意してください。
$(function() {
$(".forum").hover(
function() {
$(this).css('background-color', '#ff0')
}, function() {
$(this).css('background-color', '')
});
});
これを試してみてください。機能的で簡単です
HTML
<html>
<head></head>
<body>
<div class="forum">
test
</div>
</body>
</html>
JavaScript
$(document).ready(function() {
var colorOrig=$(".forum").css('background-color');
$(".forum").hover(
function() {
//mouse over
$(this).css('background', '#ff0')
}, function() {
//mouse out
$(this).css('background', colorOrig)
});
});
css
.forum{
background:#f0f;
}
ライブデモ
これは CSS で直接設定する必要があります。
.forum {background-color: #123456}
.forum:hover {background-color: #380606}
IE6 がリンクではない要素の上にマウスを置くことを受け付けないことが心配な場合は、次のコマンドを使用できます。 ホバリング 互換性のための jQuery のイベント。
HTML:
<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>
jQuery:
$('#id').hover(function(){
$("#hiddenDiv").css('display','block');
},
function(){
$("#hiddenDiv").css('display','none');
}
);
多くの苦労を経て、ようやく機能するようになりました。(完全にテスト済み)
以下の例は、すでにクリックされたボタンの色が変更されるべきではないという事実もサポートします。
JQueryコード
var flag = 0; // Flag is to check if you are hovering on already clicked item
$("a").click(function() {
$('a').removeClass("YourColorClass");
$(this).addClass("YourColorClass");
flag=1;
});
$("a").mouseover(function() {
if ($(this).hasClass("YourColorClass")) {
flag=1;
}
else{
$(this).addClass("YourColorClass");
};
});
$("a").mouseout(function() {
if (flag == 0) {
$(this).removeClass("YourColorClass");
}
else{
flag = 0;
}
});
これが私の解決策です:
$(document).ready(function () {
$( "td" ).on({
"click": clicked,
"mouseover": hovered,
"mouseout": mouseout
});
var flag=0;
function hovered(){
$(this).css("background", "#380606");
}
function mouseout(){
if (flag == 0){
$(this).css("background", "#ffffff");
} else {
flag=0;
}
}
function clicked(){
$(this).css("background","#000000");
flag=1;
}
})