Changer la couleur de fond sur mouseover et de le supprimer après mouseout

j'ai un tableau dans lequel la classe est forum . Mon code jquery: 

<script type="text/javascript">
    $(document).ready(function() {
        $('.forum').bind("mouseover", function(){
            var color  = $(this).css("background-color");

            $(this).css("background", "#380606");

            $(this).bind("mouseout", function(){
                $(this).css("background", color);
            })    
        })    
    })
</script>

Il fonctionne parfaitement, mais est-il possible de le faire de manière plus efficace sans var color = $(this).css("background-color"); . Juste après mouseout laisser l'arrière-plan précédent-couleur et supprimer #380606 ? Remercier.

26
demandé sur good_evening 2010-09-18 13:50:05

7 réponses

si vous ne vous souciez pas de IE ≤6, Vous pouvez utiliser CSS pur ... 

.forum:hover { background-color: #380606; }


.forum { color: white; }
.forum:hover { background-color: #380606 !important; }
/* we use !important here to override specificity. see http://stackoverflow.com/q/5805040/ */

#blue { background-color: blue; }
<meta charset=utf-8>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

avec jQuery, il est généralement préférable de créer une classe spécifique pour ce style: 

.forum_hover { background-color: #380606; }

et ensuite appliquer la classe sur mouseover, et l'enlever sur mouseout. 

$('.forum').hover(function(){$(this).toggleClass('forum_hover');});


$(document).ready(function(){
  $('.forum').hover(function(){$(this).toggleClass('forum_hover');});
});
.forum_hover { background-color: #380606 !important; }

.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

si vous ne devez pas modifier la classe, vous pouvez sauvegarder la couleur de fond originale dans .data() : 

  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });


$(document).ready(function(){
  $('.forum').data('bgcolor', '#380606').hover(function(){
    var $this = $(this);
    var newBgc = $this.data('bgcolor');
    $this.data('bgcolor', $this.css('background-color')).css('background-color', newBgc);
  });
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>

ou 

  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );   


$(document).ready(function(){
  $('.forum').hover(
    function(){
      var $this = $(this);
      $this.data('bgcolor', $this.css('background-color')).css('background-color', '#380606');
    },
    function(){
      var $this = $(this);
      $this.css('background-color', $this.data('bgcolor'));
    }
  );    
});
.forum { color: white; }
#blue { background-color: blue; }
<meta charset=utf-8>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<p class="forum" style="background-color:red;">Red</p>
<p class="forum" style="background:green;">Green</p>
<p class="forum" id="blue">Blue</p>
49
répondu kennytm 2016-06-25 18:03:16

définir le fond d'origine-couleur dans le fichier CSS de vous: 

.forum{
    background-color:#f0f;
}​

vous n'avez pas à capturer la couleur originale en jQuery. Rappelez-vous que jQuery va modifier le style INLINE, donc en définissant la couleur de fond à nul, vous obtiendrez le même résultat. 

$(function() {
    $(".forum").hover(
    function() {
        $(this).css('background-color', '#ff0')
    }, function() {
        $(this).css('background-color', '')
    });
});​
16
répondu Marc Uberstein 2012-05-08 08:31:14

essayez ceci, son fonctionnement et simple

HTML 

​​​​​​​​​​​​​​​​​​​​​<html>
<head></head>
<body>
    <div class="forum">
        test
    </div>
</body>
</html>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Javascript 

$(document).ready(function() {
    var colorOrig=$(".forum").css('background-color');
    $(".forum").hover(
    function() {
        //mouse over
        $(this).css('background', '#ff0')
    }, function() {
        //mouse out
        $(this).css('background', colorOrig)
    });
});​

css ​ 

.forum{
    background:#f0f;
}​

live demo

http://jsfiddle.net/caBzg /

8
répondu Pramendra Gupta 2010-09-19 02:01:09

cette valeur doit être définie directement dans la CSS. 

.forum {background-color: #123456}
.forum:hover {background-color: #380606}

si vous craignez que L'IE6 n'accepte pas les éléments qui ne sont pas des liens, vous pouvez utiliser l'événement hover de jQuery pour la compatibilité.

3
répondu Andrea 2010-09-18 09:55:38

HTML: 

<div id="id">
</div>
<div id="hiddenDiv" style="display:none;"></div>

jQuery: 

$('#id').hover(function(){
    $("#hiddenDiv").css('display','block');
  },
  function(){
    $("#hiddenDiv").css('display','none');
  }
);
1
répondu anuja 2012-11-23 13:42:23

après beaucoup de lutte finalement obtenu le fonctionnement. (Parfaitement testé)

l'exemple ci-dessous va également soutenir le fait que la couleur du bouton déjà cliqué ne doit pas être des changements

Code JQuery 

var flag = 0; // Flag is to check if you are hovering on already clicked item

$("a").click(function() {
    $('a').removeClass("YourColorClass");
    $(this).addClass("YourColorClass");
    flag=1;
}); 

$("a").mouseover(function() {
    if ($(this).hasClass("YourColorClass")) {
        flag=1;
    }
    else{
        $(this).addClass("YourColorClass");
    };
});

$("a").mouseout(function() {
    if (flag == 0) {
        $(this).removeClass("YourColorClass");
    }
    else{
        flag = 0;
    }
});
0
répondu Abhishek Goel 2013-06-08 07:55:25

C'est ma solution: 

$(document).ready(function () {
  $( "td" ).on({
    "click": clicked,
    "mouseover": hovered,
    "mouseout": mouseout
});

var flag=0;

function hovered(){
  $(this).css("background", "#380606");
}

function mouseout(){
  if (flag == 0){
  $(this).css("background", "#ffffff");
} else {
  flag=0;
}
}

function clicked(){
  $(this).css("background","#000000");
  flag=1;
}
})
0
répondu Priyanka 2016-12-06 09:42:48