Удалить атрибут цвета фона из css onmouseover с помощью JQuery

Я пытаюсь удалить цвет фона 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

Ответ 1

Вам нужно использовать transparent, пустая строка не является допустимым цветом фона.

Также вы можете просто сделать это с помощью css, используя флаг hover:

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

Ответ 2

Проверьте этот скрипт

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

вам просто нужно настроить css, не нужно script сделать это

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

Ответ 3

Использование 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

Ответ 4

Попробуйте этот простой способ в 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"); 
           }); 
      }); 
 });

Ответ 5

Свойство backgroundColor нельзя рассматривать как другое свойство в функции animate()

Все анимированные свойства должны быть анимированы до одного числового значения, кроме как указано ниже; большинство свойств, которые не являются числовыми, не могут быть анимированы, используя базовые функции jQuery (например, ширина, высота или слева могут быть анимированы, но фоновый цвет не может быть, если только * jQuery.Color() *). Значения свойств обрабатываются как количество пикселей, если не указано иное. Единицы em и% могут быть указаны там, где это применимо. ссылка http://api.jquery.com/animate/

для jQuery.Color() вам нужно загрузить jquery.color-2.1.2.min.js из <код > https://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>

Ответ 6

вы можете просто сделать это с помощью CSS с помощью флага наведения:

#LoginTab:hover
{
    background: none;
}

Ответ 7

Отметьте эту скрипту: https://jsfiddle.net/rakumoyal/n762fdg1/2/

Как показано в скрипке, вы можете сделать это css. Не нужно использовать jquery.

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

Все будет хорошо. Наслаждайтесь кодом.