Javascript 使用JQuery从css onmouseover中删除背景色属性_Javascript_Jquery_Css

Javascript 使用JQuery从css onmouseover中删除背景色属性

javascript jquery css

Javascript 使用JQuery从css onmouseover中删除背景色属性,javascript,jquery,css,Javascript,Jquery,Css,我正在尝试删除mouseover上div的背景色 $("#LoginTab").mouseover(function(){ //Gives me white color $("#LoginTab").animate({backgroundColor: ''},1000); }); $("#LoginTab").mouseout(function(){ $("#LoginTab").animate({'backgroundColor':'#babfde'},1000);

我正在尝试删除mouseover上div的背景色

$("#LoginTab").mouseover(function(){
    //Gives me white color
    $("#LoginTab").animate({backgroundColor: ''},1000); 
});
$("#LoginTab").mouseout(function(){
    $("#LoginTab").animate({'backgroundColor':'#babfde'},1000);
});

这是CSS

#LoginTab
{
    background-color:#babfde;
    padding-top:5px;
    padding-bottom:5px;
    opacity:1;
    border:#babfde 2px solid;
}

因此，我想要的效果是，背景色将被删除，这将只为我提供MouseOver上的div中的边框和内容

您需要使用透明的，空字符串不是有效的背景色

此外，您还可以使用css使用

悬停

标志：

#LoginTab:hover
{
    background-color: transparent;
}

检查这把小提琴

你只需要调整css，不需要脚本就可以了

#LoginTab:hover
{
    background-color:transparent;
    padding-top:5px;
    padding-bottom:5px;
    opacity:1;
    border:#babfde 2px solid;
}

使用jQuery！您可以使用

hover

jQuery函数

将一个或两个处理程序绑定到匹配的元素，在鼠标指针进入和离开元素时执行。[]

使用CSS 您只需使用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;
}

在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"); 
           }); 
      }); 
 });

backgroundColor属性不能被视为animate（）函数中的其他属性
所有已设置动画的属性都应设置为单个数值，以下说明除外大多数非数字属性不能使用基本jQuery功能设置动画（例如，宽度、高度或左侧可以设置动画，但背景色不能设置，除非使用*jQuery.color（）插件*）。除非另有规定，否则特性值将被视为像素数。在适用的情况下，可以指定单位em和%参考
对于jQuery.Color（）您必须从

#罗金塔布 { 背景色：#babfde；垫面：5px；垫底：5px；不透明度：1；边框：#babfde 2px实心； } 登录标签 $（“#LoginTab”）.mouseenter（函数（）{ $（this.animate（{backgroundColor:'#ffffff'}，1000）；//给我白色 }); $（“#LoginTab”）.mouseleave（函数（）{ 动画（{backgroundColor:'#baffde'}，1000）； });
您可以通过CSS使用悬停标志来实现：

#LoginTab:hover { background: none; }
检查这把小提琴：
如fiddle中所示，您可以通过css来完成。无需使用jquery

#LoginTab:hover { background-color:transparent; }

它会很好用的。享受代码。
您有什么问题吗？无法使用“颜色”属性设置动画。这里有Jqery颜色的UI。你有没有可能接受这个问题的答案：-）谢谢。这是有效的：）你能告诉我，如果我可以使背景颜色的不透明度不完全透明，但类似于0.3吗？像这样使用
rgba
：
background:rgba（1861912220.3）。您还可以使用jqeury.color（）插件更改背景色，而不使用背景色：透明； <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8">  <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> #LoginTab:hover { background: none; } #LoginTab:hover { background-color:transparent; }