jquery: hover function only if element is not .clicked

Question

I have been trying to set up the following script without success.

I have the element #num_11 which fades in a couple of other elements on hover and fades them out on mouseout. That's working perfectly (which I am already quite proud of)

What I want is that if you CLICK on #num_11 that the other elements STAY visible. On click again, they should disappear again and the whole script go back to the original "mode"

$("#num_11").hover(
    function(){
        $("#identification li").each(function() {
            $("h1", this).fadeIn();
            $("span", this).addClass("opague");
        });
    },
    function(){
        $("#identification li").each(function() {
            $("h1", this).hide();
            $("span", this).removeClass("opague");
        });
    }
);

$("#num_11").click(function(){
    $(this).toggleClass('clicked');
});

What I have tried in the code above was putting $("#num_11").not(".clicked").hover( and $("#num_11:not(".clicked")").hover( as well as a if-else-query which ended up in chaos…

I would really appreciate your help with my challenge.

All the best, K

Chamika Sandamal · Accepted Answer · 2011-11-09 03:33:55Z

1

try following code;

$("#num_11").hover(
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).fadeIn();
        $("span", this).addClass("opague");
    });
  }
},
function(){
  if(!$(this).hasclass('clicked')){
    $("#identification li").each(function() {
        $("h1", this).hide();
        $("span", this).removeClass("opague");
    });
  }
});
$("#num_11").click(function(){
$(this).toggleClass('clicked');
});

answered Nov 9, 2011 at 3:33

Chamika Sandamal

24.4k5 gold badges68 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

koiko Over a year ago

Thanks Chamika, this worked for me! I don't know why this solution didn't come to my mind during my helpless tries ;)

rkw · Accepted Answer · 2011-11-09 04:35:24Z

0

Try filtering:

$("#num_11").filter(function() {
    return !$(this).hasClass('clicked');
}).hover(
    ...
);

answered Nov 9, 2011 at 4:35

rkw

7,2974 gold badges28 silver badges39 bronze badges

2 Comments

koiko Over a year ago

Hi rkw, thanks for your quick answer. Unfortunately this solution didn't bring the result – the behaviour was all the same as without filtering. But I like your approach with only one extra line of code

rkw Over a year ago

I just realized something, is #num_11 a single element, or is it suppose to represent a group of elements?

Collectives™ on Stack Overflow

jquery: hover function only if element is not .clicked

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related