14

我正在尝试删除 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 内的边框和内容

4

7 回答 7

24

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

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

#LoginTab:hover
{
    background-color: transparent;
}
于 2013-07-04T04:45:18.110 回答
6

检查这个小提琴

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

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

#LoginTab:hover
{
    background-color:transparent;
    padding-top:5px;
    padding-bottom:5px;
    opacity:1;
    border:#babfde 2px solid;
}
于 2013-07-04T04:51:29.937 回答
3

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

#LoginTab:hover
{
    background: none;
}
于 2016-06-15T11:17:39.967 回答
2

使用 jQuery！

您可以使用hoverjQuery 函数

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

$('#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
于 2013-07-04T04:52:58.803 回答
2

在 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"); 
           }); 
      }); 
 });
于 2013-07-04T05:01:28.827 回答
2

backgroundColor 属性不能被视为animate()函数中的其他属性

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

对于jQuery.Color()你必须从下载 jquery.color -2.1.2.min.jshttps://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>
于 2013-07-04T05:13:45.840 回答
2

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

如小提琴所示，您可以通过 css 来完成 ..无需使用 jquery。

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

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

于 2016-08-25T04:44:02.577 回答