鼠标悬停时更改背景颜色,鼠标悬停后将其删除 [英] Change background color on mouseover and remove it after mouseout
问题描述
我有一个类为forum
的表.我的jquery代码:
I have table which class is forum
. My jquery code:
<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
吗?谢谢.
It perfectly works, but is it possible to do it in more efficient way without var color = $(this).css("background-color");
. Just after mouseout
leave the previous background-color and remove #380606
? Thank you.
推荐答案
如果您不关心IE≤6,则可以使用纯CSS ...
If you don't care about IE ≤6, you could use pure 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,通常最好为此样式创建一个特定的类:
With jQuery, usually it is better to create a specific class for this style:
.forum_hover { background-color: #380606; }
,然后在鼠标悬停时应用该类,并在鼠标悬停时将其删除.
and then apply the class on mouseover, and remove it on mouseout.
$('.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()
中:
If you must not modify the class, you could save the original background color in .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>
这篇关于鼠标悬停时更改背景颜色,鼠标悬停后将其删除的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!