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标志来执行此操作：

#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函数

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

$('#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

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

除非如下所述，否则应将所有动画属性设置为单个数值。 大多数非数字属性无法使用基本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 个答案:

使用jQuery！

使用CSS

设置颜色不透明度