jQuery 更改鼠标悬停时的背景颜色并在鼠标悬停后将其删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3741157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change background color on mouseover and remove it after mouseout
提问by good_evening
I have table which class is forum. My jquery code:
我有表哪个班级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>
It perfectly works, but is it possible to do it in more efficient way without var color = $(this).css("background-color");. Just after mouseoutleave the previous background-color and remove #380606? Thank you.
它完美地工作，但是否可以在没有var color = $(this).css("background-color");. 就在mouseout离开之前的背景颜色并删除之后#380606？谢谢你。
回答by kennytm
If you don't care about IE ≤6, you could use pure CSS ...
如果你不关心 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>With jQuery, usually it is better to create a specific class for this style:
使用 jQuery，通常最好为这种样式创建一个特定的类：
.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>If you must not modify the class, you could save the original background color in .data():
如果您不得修改类，则可以将原始背景颜色保存在.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>or
或者
$('.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>回答by Marc Uberstein
Set the original background-color in you CSS file:
在 CSS 文件中设置原始背景颜色：
.forum{
background-color:#f0f;
}?
You don't have to capture the original color in jQuery. Remember that jQuery will alter the style INLINE, so by setting the background-color to null you will get the same result.
您不必在 jQuery 中捕获原始颜色。请记住，jQuery 会改变样式 INLINE，因此通过将背景颜色设置为 null，您将获得相同的结果。
$(function() {
$(".forum").hover(
function() {
$(this).css('background-color', '#ff0')
}, function() {
$(this).css('background-color', '')
});
});?
回答by Pramendra Gupta
Try this , its working and simple
试试这个，它的工作和简单
HTML
HTML
?????????????????????<html>
<head></head>
<body>
<div class="forum">
test
</div>
</body>
</html>?????????????????????????????????????????????
Javascript
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 ?
css ?
.forum{
background:#f0f;
}?
live demo
现场演示
回答by Andrea
This should be set directly in the CSS.
这应该直接在 CSS 中设置。
.forum {background-color: #123456}
.forum:hover {background-color: #380606}
If you are worried about the fact the IE6 will not accept hover over elements which are not links, you can use the hoverevent of jQuery for compatibility.
如果您担心 IE6 不接受将鼠标悬停在非链接元素上，您可以使用jQuery的悬停事件来实现兼容性。
回答by anuja
HTML:
HTML：
<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>
jQuery:
jQuery：
$('#id').hover(function(){
$("#hiddenDiv").css('display','block');
},
function(){
$("#hiddenDiv").css('display','none');
}
);
回答by Abhishek Goel
After lot of struggle finally got it working. ( Perfectly tested)
经过一番折腾，终于搞定了。（完美测试）
The below example will also support the fact that color of already clicked button should not be changes
下面的示例还将支持已单击按钮的颜色不应更改的事实
JQuery Code
查询代码
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;
}
});
回答by Priyanka
This is my solution :
这是我的解决方案：
$(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;
}
})
