jQuery CSS Hover

J'ai un CSS de menu qui définit le parent li de couleur lors du survol et de l'enfant ul (sous-menu). Fondamentalement, lorsque vous passez sur le menu, il change de couleur et le reste jusqu'à ce que vous mouseoff le menu et sous-menu. Il a l'air sympa.

J'ai ajouté un peu de jQuery code pour changer la couleur du menu lors de la jusqu'à une certaine page est ouverte. Ensuite, ces menus vont s'estomper en arrière et reprendre des couleurs. À quel point, en attente d'un vol stationnaire à changer de couleur.

Le problème, je vais avoir, c'est, lorsque vous modifiez la couleur de retour à son état d'origine (défini dans les CSS) avec jQuery, il supprime le :hover classe empêcher le changement de couleur lors du survol et de l'enfant sous-menu. Toutes les idées sur la façon de résoudre ce problème? Est-il un sélecteur jQuery qui va me permettre de régler le :hover classe de retour à la normale?

/* ---- Menu Colours ---- */
$(document).ready(function()
{
var colours = ['d50091', 'c8fa00', '00b4ff', 'b158fc', 'ffa800', '00b72f'];
var counter = 0; //Loop for the colurs
var status  = 0; //Status of the colours (greyed out or visible)
$('ul.menu-horiz').children('li').children('a').hover(function()
{
$(this).parent()[0].css('color', '#d50091');
}, function()
{
$(this).parent()[0].css('color', '#b6b6b6');
});
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css({opacity: 0.2, color: '#' + colours[counter]});
counter++;
});
$('.haccordion .header').click(function()
{
if (window.location.hash.substr(1) == 'photogallery')
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
if ($(this).css('opacity') != '1.1')
{
$(this).animate({opacity: 1.1}, 1000).css('color', '#b6b6b6');
}
});
}
else
{
counter = 0;
if ($('ul.menu-horiz').children('li').children('a').css('opacity') != '0.2')
{
$('ul.menu-horiz').children('li').children('a').animate({opacity: 0.2}, 1000, function()
{
$('ul.menu-horiz').children('li').children('a').each(function()
{
$(this).css('color', '#' + colours[counter]);
counter++;
});
});
}
}
});
});
Vous avez $('ul.menu-horiz').children('li').children('a') trois fois. Vous devez enregistrer que ce soit à une variable et à acquérir une certaine efficacité.

OriginalL'auteur Anon | 2009-10-29

  1. 6

    Vous devriez être en mesure d'utiliser le :hover sélecteur et passez un over() et out() fonction définie et annuler le vol stationnaire de couleur respectivement. Voir la :hover de la documentation pour plus d'.

    Exemple Simple

    compte tenu de la CSS:

    <style>
.blue { background-color: blue; }
.red { background-color: red; }
</style>

    faire quelque chose comme ceci:

    $('li').hover(function() {
$(this).removeClass('red'); 
$(this).addClass('blue');
}, 
function() {
$(this).removeClass('blue'); 
$(this).addClass('red');
})

    OriginalL'auteur beggs

  2. 0

    J'ai eu des problèmes en appliquant le changement de couleur à la lors du survol du parent

    • (comme vous pouvez le voir dans le code affiché ci-dessus).

      M'a pris jusqu'à présent à réaliser qu'il a besoin d'être modifié pour

      $('ul.menu-horiz').children('li').hover(function()
{
$(this).children('a').css('color', '#d50091');
}, function()
{
$(this).children('a').css('color', '#b6b6b6');
});

      M'ignorer >_>

    OriginalL'auteur Anon