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

Question

我正在尝试删除div onmouseover的背景颜色。

$("#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;
}

所以我想要的效果是背景颜色将被删除，这将只给我在div onmouseover内的边框和东西

Answer 1

您需要使用transparent ，空字符串不是有效的背景颜色。

你也可以使用hover标志用css做到这一点：

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

Answer 2

检查这个小提琴

http://jsfiddle.net/vigneshvdm/xjhBT/

你只需要调整css，不需要脚本来做到这一点

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

Answer 3

你可以用CSS使用悬停标志来做到这一点：

#LoginTab:hover
{
    background: none;
}

Answer 4

使用jQuery！

你可以使用hover jQuery函数

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

$('#LoginTab').hover(
    function(){
        $(this).animate({'backgroundColor': 'transparent' }, 100);
    },
    function(){
        $(this).animate({'backgroundColor': '#babfde'}, 100);
    }
);

的jsfiddle

使用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;
}

的jsfiddle

设置颜色不透明度

在这两种情况下，您都可以使用rgba() ：

 rgba(0, 0, 0, 0.5);
      ^  ^  ^   ^------ The opacity
 Red -┘  |  └----- Blue
         └ Green

Answer 5

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

Answer 6

在animate（）函数中，backgroundColor属性不能被视为其他属性

除非如下所述，否则应将所有动画属性设置为单个数值。 大多数非数字属性无法使用基本jQuery功能进行动画处理 （例如，宽度，高度或左边可以设置动画，但背景颜色不能，除非使用* jQuery.Color（） 插件 *）。 除非另有说明，否则属性值被视为多个像素。 可以在适用的情况下指定单位em和％。 参考 http://api.jquery.com/animate/

对于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>

Answer 7

检查这个小提琴： https ： //jsfiddle.net/rakumoyal/n762fdg1/2/

如在小提琴中所示，你可以通过css来实现..不需要使用jquery。

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

它会工作正常。 享受代码。

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

问题描述

7 个解决方案

解决方案1
24 2013-07-04 04:45:18

解决方案2
6 2013-07-04 04:51:29

解决方案3
3 2016-06-15 11:17:39

解决方案4
2 2013-07-04 04:52:58

使用jQuery！

使用CSS

设置颜色不透明度

解决方案5
2 2013-07-04 05:01:28

解决方案6
2 2013-07-04 05:13:45

解决方案7
2 2016-08-25 04:44:02

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

问题描述

7 个解决方案

解决方案1 24 2013-07-04 04:45:18

解决方案2 6 2013-07-04 04:51:29

解决方案3 3 2016-06-15 11:17:39

解决方案4 2 2013-07-04 04:52:58

使用jQuery！

使用CSS

设置颜色不透明度

解决方案5 2 2013-07-04 05:01:28

解决方案6 2 2013-07-04 05:13:45

解决方案7 2 2016-08-25 04:44:02

解决方案1
24 2013-07-04 04:45:18

解决方案2
6 2013-07-04 04:51:29

解决方案3
3 2016-06-15 11:17:39

解决方案4
2 2013-07-04 04:52:58

解决方案5
2 2013-07-04 05:01:28

解决方案6
2 2013-07-04 05:13:45

解决方案7
2 2016-08-25 04:44:02