goo*_*ing 28 mouse jquery mouseover mouseout
我有班级的班级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？谢谢.
ken*_*ytm 53
如果你不关心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; }
然后在mouseover上应用该类,并在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():
$('.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>Mar*_*ein 19
在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;
}?
现场演示