JQuery click and hover function not working correctly

Question

I have two buttons which im working with, I am trying to make a hover effect and when the user clicks on the button have a clicked event.

I have been playing around with a few jquery methods such as mouseover mouseout etc but still no luck. The idea is to get the hover to only work on elements that have not been selected already.

The issue with the code below is that once an button has been selected if the user hovers over the selected method it gets rid of its current state.

Is their a way of not getting rid of the current state once a button has been selected?

Thanks

$(".M").click(function(){
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
    $(".F").css('color','#515B69');
    $(".F").css('background-color','#fff');   
});

$(".M").mouseover(function() {
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
});

$('.M').mouseleave(function(){
    $(this).css('color','#515B69');
    $(this).css('background-color','#fff');
});

$(".F").click(function(){
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
    $(".M").css('color','#515B69');
    $(".M").css('background-color','#fff');
});

$(".M").mouseover(function() {
    $(this).css('background-color','#515B69');
    $(this).css('color','#fff');
});

$('.F').mouseleave(function(){
    $(this).css('color','#515B69');
    $(this).css('background-color','#fff');
});

Joseph Spens · Accepted Answer · 2014-01-22 16:01:07Z

4

I would recommend offloading a lot of these tasks with CSS

.M, .F {
  background-color: #fff;
  color: #515B69;
}

.M.active, .M:hover,
.F.active, .F:hover {
  color: #fff;
  background-color: #515B69;
}

And for your JS

$('.M, .F').on('click', function () {
  $('.M, .F').removeClass('active');
  $(this).addClass('active');
});

answered Jan 22, 2014 at 16:01

Joseph Spens

6627 silver badges12 bronze badges

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

5 Comments

Jacek Kowalewski Over a year ago

+1, You were first... :). To be not off topic: also the toggleClass (api.jquery.com/toggleclass) function is helpful.

Hashey100 Over a year ago

Thanks for the help, but im still getting the same problem when a user hovers over the clicked state it gets rid of it

Jacek Kowalewski Over a year ago

Make also the .M.active:hover style... Maybe this will help :)

Joseph Spens Over a year ago

@Jacek You're right, $.toggleClass() works great. In this case you still want $.removeClass() on the first line in the callback because its applied to all buttons, active and inactive, so we want to make sure we're removing from all. Which means the second line is always adding a class, whether you're toggling or adding, and it's better to be explicit.

Jacek Kowalewski Over a year ago

@josephspens Yeah. I saw toggle in Your answer before edit (as far as I remember), so I decided to make a note about that. Thx for information, and great support. Best regards.

ElendilTheTall · Accepted Answer · 2014-01-22 15:59:02Z

1

Set a variable in your click functions and then check it with if statements in your mouseover and mouseleave functions. For example:

var clicked = 0;

$(".F").click(function(){
$(this).css('background-color','#515B69');
$(this).css('color','#fff');
$(".M").css('color','#515B69');
$(".M").css('background-color','#fff');
clicked = 1;
});

if (clicked > 0){
 $(".F").mouseover(function() {
 $(this).css('background-color','#515B69');
 $(this).css('color','#fff');
 });
}

answered Jan 22, 2014 at 15:59

ElendilTheTall

1,50219 silver badges27 bronze badges

Comments

Jacek Kowalewski · Accepted Answer · 2014-01-22 16:02:12Z

1

I'd prefer to use removeClass and addClass. If You use removeClass without parameters, all classes will be removed from element. Then add Class, that You want. You can make it that way, for example:

$(selector).removeClass().addClass("your_class");

In that way, styles are seperated from scripts, which is always a good practice. Try to rewrite Your code in that way. If You have any questions, just ask in a comment, I will update my answer :).

PS. Of course You must place "your_class" in style.css file :).

Best regards

answered Jan 22, 2014 at 16:02

Jacek Kowalewski

2,8712 gold badges25 silver badges36 bronze badges

Collectives™ on Stack Overflow

JQuery click and hover function not working correctly

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related