Question

I have three divs with the class ‘thumbs’ and they are used to select products. I’m currently using the following code to highlight the current choice:

$('.thumbs').hover(function(){                                 
$(this).stop().fadeTo("normal", 1.0);
},function(){
$(this).stop().fadeTo("slow", 0.5);
});

By default all choices are at 50% opacity, when you hover over the choice it will fade to 100% opacity and when you move your mouse it will go back to 50%. The problem is I want it to stay at 100% when an option is clicked, and then only have the other 2 options changed on hover. Then when another option is clicks I want that to go to 100% opacity and the others to go back to 50%. I hope I’ve explained myself well, if not feel free to comment. Any help would be greatly appreciated.

Answer 1

$(window).bind("load", function() {
    var activeOpacity   = 1.0,
        inactiveOpacity = 0.5,
        fadeTime = "slow",
        clickedClass = "selected",
        thumbs = ".thumbs";

    $(thumbs).hide();
    $(thumbs).fadeTo(1, inactiveOpacity);

    $(thumbs).hover(
        function(){
            $(this).fadeTo(fadeTime, activeOpacity);
        },
        function(){
            // Only fade out if the user hasn't clicked the thumb
            if(!$(this).hasClass(clickedClass)) {
                $(this).fadeTo(fadeTime, inactiveOpacity);
            }
        });
     $(thumbs).click(function() {
         // Remove selected class from any elements other than this
         var previous = $(thumbs + '.' + clickedClass).eq();
         var clicked = $(this);
         if(clicked !== previous) {
             previous.removeClass(clickedClass);
         }
         clicked.addClass(clickedClass).fadeTo(fadeTime, activeOpacity);
     });
});

I think that will help. I had the same problem and someone here on Stackoverflow made that script for me. And it works perfect!
(I edited a few things…)