web-dev-qa-db-fra.com

Supprimer l'attribut de couleur d'arrière-plan de css onmouseover à l'aide de JQuery

J'essaie d'enlever la couleur de fond d'une div onmouseover.

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

Voici le CSS

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

Donc, l’effet que je veux, c’est que la couleur d’arrière-plan disparaisse, ce qui ne me donne que des bordures et des éléments internes à cette div

javascriptjquerycss
14
Prodeep Chatterjee

Vous devez utiliser transparent, une chaîne vide n'est pas une couleur d'arrière-plan valide.

Vous pouvez aussi le faire avec css en utilisant un indicateur hover:

#LoginTab:hover
{
    background-color: transparent;
}
24
Seth McClaine

Vérifiez ce violon

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

vous avez juste besoin de Tweak css, pas besoin de script pour le faire

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

vous pouvez simplement le faire avec CSS en utilisant un indicateur de survol:

#LoginTab:hover
{
    background: none;
}
3
Hardik Chapla

la propriété backgroundColor ne peut pas être traitée comme une autre propriété dans la fonction animate ()

Toutes les propriétés animées doivent être animées avec une seule valeur numérique, sauf indication contraire ci-dessous; Les propriétés la plupart des propriétés non numériques ne peuvent pas être animées à l'aide de la fonctionnalité de base jQuery (par exemple, width, height ou left peuvent être animées mais la couleur d'arrière-plan ne peut pas l'être, à moins que * jQuery.Color ( ) Le plugin est utilisé} *). Les valeurs de propriété sont traitées en tant que nombre de pixels, sauf indication contraire. Les unités em et% peuvent être spécifiées le cas échéant. referencehttp://api.jquery.com/animate/

pour jQuery.Color () vous devez télécharger jquery.color-2.1.2.min.js à partir de 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>
2
sangram parmar

Check This Fiddle: https://jsfiddle.net/rakumoyal/n762fdg1/2/

Comme le montre fiddle, vous pouvez le faire en css ..Pas besoin d’utiliser jquery.

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

Cela fonctionnera bien. Profitez du code.

2
Kumar Rakesh

Utiliser jQuery!

Vous pouvez utiliser la fonction hover jQuery

Liez un ou deux gestionnaires aux éléments correspondants, à exécuter lorsque le pointeur de la souris entre et quitte les éléments. [ Documentation ]

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

JSFIDDLE

Utiliser CSS

Vous pouvez le faire simplement avec des transitions 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

Réglage de l'opacité de la couleur

Dans les deux cas, vous pouvez utiliser rgba():

 rgba(0, 0, 0, 0.5);
      ^  ^  ^   ^------ The opacity
 Red -┘  |  └----- Blue
         └ Green
2
Ionică Bizău

Essayez cette méthode simple dans 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"); 
           }); 
      }); 
 });
2
Sujeesh Balan