changement conditionnel (si/alors) basée sur la propriété css dans jquery

Question

J'ai plusieurs images:

<img class="photo" src="{{ img.url_small }} /> 
<img class="photo" src="{{ img.url_small }} /> 
<img class="photo" src="{{ img.url_small }} /> 

Je suis en train de changer la couleur de la bordure lorsque l'utilisateur passe sur l'image ou clique dessus:

$(".photo").click(function() { 
    $(".photo").css({"background":"white"}); 
    $(this).css({"background":"blue"}); 
}); 

$(".photo").mouseenter(function() { 
    $(this).css({"background":"green"}); 
}).mouseleave(function() { 
    $(this).css({"background":"white"}); 
}); 

(il y a une marge blanche autour de chaque image ainsi qu'un changement de fond change la frontière)

le problème est quand un utilisateur clique sur une image, il devient bleu, mais lorsque la souris est bouger de l'image, la bordure devient blanche.

J'ai essayé quelques conditionals:

$(".photo").mouseenter(function() { 
    if($(this).css("background") != "blue") { 
     $(this).css({"background":"green"}); 
    } 
}).mouseleave(function() { 
    if($(this).css("background") != "blue") { 
     $(this).css({"background":"white"}); 
    } 
}); 

mais les frontières sont encore tourné dos blanc du bleu. Comment puis-je garder la bordure bleue? Y a-t-il un moyen plus efficace de le faire?

Answer 1

N'utilisez pas javascript pour ce que vous pouvez faire en CSS. CSS prendra en charge le changement de style simple hover, puis il suffit d'ajouter une classe pour le click.

Si vous avez besoin de supporter IE6 pour le pointeur, j'envelopperais le <img> dans une balise <a>, et donnerais cela à l'arrière-plan.

Un exemple concret:http://jsbin.com/ogasa3

.photo { 
    background:white; 
} 
.photo:hover { 
    background:green; 
} 
.selected { 
    background:blue; 
} 
.selected:hover { 
    background:blue; 
} 

jQuery

$(".photo").click(function() { 
    $(".photo.selected").removeClass('selected'); 
    $(this).addClass('selected'); 
}); 

Answer 2

.hover est la façon la plus efficace de faire mouseenter, mouseleave.

Ce que vous avez vraiment besoin de faire est quand une image est cliqué ajouter une nouvelle classe à elle, comme si:

$(".photo").click(function() { 
    $(".photo").removeClass('currentImage'); 
    $(this).addClass('currentImage'); 
}); 

$(".photo").hover(function() { 
    jQuery(this).addClass('hoverImage'); 
}, function() { 
    jQuery(this).removeClass('hoverImage'); 
}); 

assurez-vous que currentImage est de style comme vous voulez:

.currentImage { 
background:blue; 
} 
.hoverImage { 
background:green; 
}