使用JQuery从css onmouseover中删除背景颜色属性
[英]Remove background color attribute from css onmouseover using JQuery
问题描述
I'm trying to remove background color of a div onmouseover. 
我正在尝试删除div onmouseover的背景颜色。
$("#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 onmouseover内的边框和东西
7 个解决方案
解决方案1
24 2013-07-04 04:45:18
You need to use transparent , empty string isn't a valid background color. 您需要使用transparent ，空字符串不是有效的背景颜色。
Also you could just do it with css using a hover flag: 你也可以使用hover标志用css做到这一点：
#LoginTab:hover
{
background-color: transparent;
}
解决方案2
6 2013-07-04 04:51:29
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;
}
解决方案3
3 2016-06-15 11:17:39
you could just do it with CSS using a hover flag: 你可以用CSS使用悬停标志来做到这一点：
#LoginTab:hover
{
background: none;
}
解决方案4
2 2013-07-04 04:52:58
Using jQuery! 使用jQuery！
You can use hover jQuery function 你可以使用hover jQuery函数
Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
$('#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
解决方案5
2 2013-07-04 05:01:28
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");
});
});
});
解决方案6
2 2013-07-04 05:13:45
backgroundColor property can not be treated as other property in animate() function 在animate（）函数中，backgroundColor属性不能被视为其他属性
All animated properties should be animated to a single numeric value, except as noted below; 除非如下所述，否则应将所有动画属性设置为单个数值。 most properties that are non-numeric cannot be animated using basic jQuery functionality (For example, width, height, or left can be animated but background-color cannot be, unless the * jQuery.Color() plugin is used *). 大多数非数字属性无法使用基本jQuery功能进行动画处理 （例如， 宽度，高度或左边可以设置动画，但背景颜色不能，除非使用* jQuery.Color（） 插件 *）。 Property values are treated as a number of pixels unless otherwise specified. 除非另有说明，否则属性值被视为多个像素。 The units em and % can be specified where applicable. 可以在适用的情况下指定单位em和％。 reference http://api.jquery.com/animate/ 参考 http://api.jquery.com/animate/
for jQuery.Color() you have to download jquery.color-2.1.2.min.js from https://github.com/jquery/jquery-color 对于jQuery.Color（），您必须从https://github.com/jquery/jquery-color下载jquery.color-2.1.2.min.js
<!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>
解决方案7
2 2016-08-25 04:44:02
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. 享受代码。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.