使用 JQuery 从 css onmouseover 中删除背景颜色属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17462003/
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
Remove background color attribute from css onmouseover using JQuery
提问by Prodeep Chatterjee
I'm trying to remove background color of a div onmouseover.
我试图在鼠标悬停时删除 div 的背景颜色。
$("#LoginTab").mouseover(function(){
//Gives me white color
$("#LoginTab").animate({backgroundColor: ''},1000);
});
$("#LoginTab").mouseout(function(){
$("#LoginTab").animate({'backgroundColor':'#babfde'},1000);
});
Here is the CSS
这是CSS
#LoginTab
{
background-color:#babfde;
padding-top:5px;
padding-bottom:5px;
opacity:1;
border:#babfde 2px solid;
}
So the effect I want is that background color will be removed which will give me only border and stuff inside that div onmouseover
所以我想要的效果是背景颜色将被删除，这将在鼠标悬停时只给我该 div 内的边框和内容
回答by Seth McClaine
You need to use transparent, empty string isn't a valid background color.
您需要使用transparent，空字符串不是有效的背景颜色。
Also you could just do it with css using a hoverflag:
你也可以用 css 使用一个hover标志来做到这一点：
#LoginTab:hover
{
background-color: transparent;
}
回答by Vignesh Subramanian
Check this fiddle
检查这个小提琴
http://jsfiddle.net/vigneshvdm/xjhBT/
http://jsfiddle.net/vigneshvdm/xjhBT/
you just need to tweak css, no need of script to do this
你只需要调整 css，不需要脚本来做到这一点
#LoginTab:hover
{
background-color:transparent;
padding-top:5px;
padding-bottom:5px;
opacity:1;
border:#babfde 2px solid;
}
回答by Hardik Chapla
you could just do it with CSS using a hover flag:
您可以使用悬停标志使用 CSS 来实现：
#LoginTab:hover
{
background: none;
}
回答by Kumar Rakesh
Check This Fiddle : https://jsfiddle.net/rakumoyal/n762fdg1/2/
检查这个小提琴：https: //jsfiddle.net/rakumoyal/n762fdg1/2/
As show in fiddle, You can do it by css ..No need to use jquery.
如小提琴所示，您可以通过 css 来完成。不需要使用 jquery。
#LoginTab:hover
{
background-color:transparent;
}
It will work fine. Enjoy the code.
它会正常工作。享受代码。
回答by Ionic? Biz?u
Using jQuery!
使用jQuery！
You can use hoverjQuery function
您可以使用hoverjQuery 函数
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements. [documentation]
将一两个处理程序绑定到匹配的元素，在鼠标指针进入和离开元素时执行。[文档]
$('#LoginTab').hover(
function(){
$(this).animate({'backgroundColor': 'transparent' }, 100);
},
function(){
$(this).animate({'backgroundColor': '#babfde'}, 100);
}
);
Using CSS
使用 CSS
You can do it simply with CSS transitions:
您可以简单地使用 CSS 过渡来实现：
#LoginTab {
background-color: #AD310B; /* <--- your color here */
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
height: 100px;
}
#LoginTab:hover {
background-color: transparent;
-webkit-transition: background-color 1000ms linear;
-moz-transition: background-color 1000ms linear;
-o-transition: background-color 1000ms linear;
-ms-transition: background-color 1000ms linear;
transition: background-color 1000ms linear;
}
Setting the color opacity
设置颜色不透明度
In both cases you can use rgba():
在这两种情况下，您都可以使用rgba()：
rgba(0, 0, 0, 0.5);
^ ^ ^ ^------ The opacity
Red -┘ | └----- Blue
└ Green
回答by Sujeesh Balan
Try this simple way in jQuery:
在 jQuery 中试试这个简单的方法：
$(document).ready(function() {
$("#LoginTab").mouseouver(function() {
var p = $("#LoginTab").css("background-color", "none");
p.hide(1500).show(1500);
p.queue(function() {
p.css("background-color", "#color");
});
});
});
回答by sangram parmar
backgroundColor property can not be treated as other property in animate()function
backgroundColor 属性不能被视为animate()函数中的其他属性
All animated properties should be animated to a single numeric value, except as noted below; most properties that are non-numeric cannot be animatedusing basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the *jQuery.Color()plugin is used*). Property values are treated as a number of pixels unless otherwise specified. The units em and % can be specified where applicable. referencehttp://api.jquery.com/animate/
所有动画属性都应该动画为一个单一的数值，除了下面提到的；大多数非数字属性不能使用基本的 jQuery 功能进行动画处理（例如，宽度、高度或左可以设置动画，但背景颜色不能设置动画，除非使用 * jQuery.Color()插件*）。除非另有说明，否则属性值被视为像素数。可以在适用的情况下指定单位 em 和 %。参考http://api.jquery.com/animate/
for jQuery.Color()you have to download jquery.color-2.1.2.min.jsfrom https://github.com/jquery/jquery-color
对于jQuery.Color（） ，你必须下载 jquery.color-2.1.2.min.js从https://github.com/jquery/jquery-color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--<link rel="stylesheet" href="menu.css">-->
<script src="Scripts/jquery-1.10.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery.color-2.1.2.min.js"></script>
</head>
<body>
<style>
#LoginTab
{
background-color: #babfde;
padding-top: 5px;
padding-bottom: 5px;
opacity: 1;
border: #babfde 2px solid;
}
</style>
<div id="LoginTab">
login tab</div>
<script type="text/javascript">
$("#LoginTab").mouseenter(function () {
$(this).animate({ backgroundColor: '#ffffff' }, 1000); //gives me white color
});
$("#LoginTab").mouseleave(function () {
$(this).animate({ backgroundColor: '#babfde' }, 1000);
});
</script>
</body>
