JQuery CSS hover utilisant la variable

Question

Comment puis-je transmettre une variable précédemment capturée dans une propriété d'arrière-plan à l'aide de jQuery? Je travaille avec une très grande table, beaucoup de cellules et beaucoup de données. Il y a plusieurs couleurs utilisées, appliquées à la table plutôt qu'à la cellule (avec de bonnes raisons).

Voici mon code (HTML très condensé)

<table> 
    <tr> 
     <td class="nonLevel"><ul class="list"><li>text to go here</li></ul></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
     <td class="block"><a href="#"><ul class="list"><li>text to go here</li></ul></a></td> 
    </tr> 
</table> 


$(".block").hover(function() { 
    var myColor = $(this).css("background-color"); 

    $(this).css({'background-color' : 'yellow'}); 
    }, function() { 
     var cssObj = { 
      'background-color' : myColor, 
     } 
     $(this).css(cssObj); 
    }); 

Je suis en train de capturer la couleur d'origine lors du survol (qui fonctionne quand je passe la variable myColor en alerte), puis changez la couleur pour jaunir et ensuite sur le rollout revenir à «myColor». J'ai regardé addClasss et removeClass, mais ils ne semblent pas le couper en termes de configuration. Encore une fois, la couleur d'arrière-plan est définie dans CSS sur la table, pas la cellule, cela ne peut pas être changé.

Answer 1

Vous n'avez pas vraiment besoin de stocker la couleur de fond - ou même d'utiliser JavaScript/jQuery. Vous pouvez simplement utiliser CSS:

.block:hover { 
    background-color: yellow; 
} 

Si vous devez utiliser JavaScript (par exemple, parce que vous devez soutenir IE6), il suffit de définir la couleur de fond vide:

$(".block").hover(function() { 
    $(this).css("background-color", "yellow"); 
}, function() { 
    $(this).css("background-color", ""); 
}); 

Et si vous pensez toujours que vous devez stocker la couleur, utiliser la fonctionnalité de données jQuerys:

$(".block").hover(function() { 
    $(this).data("background-color", $(this).css("background-color")); 
    $(this).css("background-color", "yellow"); 
}, function() { 
    $(this).css("background-color", $(this).data("background-color")); 
}); 

Answer 2

Vous pouvez farcir la couleur existante dans un attribut de données:

$(".block").hover(function() { 
    $(this).data("bkg",$(this).css("background-color")); 
    $(this).css('background-color', 'yellow'); 
}, function() { 
    $(this).css("background-color", $(this).data("bkg")); 
}); 

Answer 3

Je crois que vous devez déclarer votre variable myColor en dehors de l'appel jQuery. Sinon, il devrait s'agir d'une variable locale, ce qui signifie qu'elle sera hors de portée avant que hover ne soit appelée une seconde fois sur handlerOut.

Answer 4

la meilleure façon de gérer cela, surtout si votre table est grande, est d'utiliser .live() et .data() .

$('.block').live('mouseover mouseout', function(event) { 
    var $this = $(this); 
    if (event.type === 'mouseover') { 
     var myColor = $this.css('background-color'); 
     $this.data('myColor', myColor); 
     $this.css('background-color': 'yellow'); 
    } else { 
     $this.css('background-color', $this.data('myColor')); 
    } 
}); 

Hot demo action →

Answer 5

Vous pouvez également utiliser des données jQuery pour stocker la couleur d'origine. Et puis le prendre au mouseout.

$(".block").each(function (index, elem) { 
    $(elem).data('orginalColor', $(elem).css("background-color")) 
}).hover(function() { 
    $(this).css({'background-color' : 'yellow'}); 
}, function() { 
    $(this).css({'background-color' : $(this).data('orginalColor')}); 
}); 

Vous pouvez lire les données jQuery ici: jQuery Data

Aussi je vous conseille d'utiliser la place délégué (jQuery utilise interne dans certains cas pour vous). Cette liaison un seul gestionnaire d'événements pour toute la table au lieu d'un pour chaque td

$('.block').each(function (index, elem) { //code }); 
$('table').delegate('td', 'mouseover', function() { //code }); 
$('table').delegate('td', 'mouseout', function() { //code }); 

..fredrik