CODEWITHSUNDEEP
jqueryclickhovertoggle
hyperrjas
hyperrjas

Reputation: 10744

Remove/Add hover after toggle Jquery

I have this css:

.disable {
          properties
          }

.comment_action:hover {
                       properties
                       }

I have this jQuery:

//comment button index disable
$("#mydiv").toggle(function() {
 $(this).find(".comment_action").addClass('disable');   
},
function(){
 $(this).find(".comment_action").removeClass('disable');
});

The problem for me is that when I doing click the .comment_action:hover is not disappear or removed. I want that If I doing click on the class .comment_action:hover dissapear and if I doing click again the .comment_action:hover appear.

Upvotes: 1

Views: 1726

Answers (3)

Flater
Flater

Reputation: 13803

You are telling your browser to add hover effects to .comment_action. This is what is going to happen to all elements with that class, regardless of it having any other class such as .disable.

Solution: add the :hover properties to a new .enable class. Instead of just removing and adding .disable, also add and remove .enable.

.disable {
          properties
          }

.enable:hover {
                properties
                }

Upvotes: 0

Starx
Starx

Reputation: 79021

Better solution would be toggle the class. What you are trying to do can be done in one line. 

$("#mydiv").click(function() {
    $(this).find(".comment_action").toggleClass('disable');       
});

Demo

:)

Upvotes: 0

Larry Williamson
Larry Williamson

Reputation: 1143

You would need an !important added to properties you want to override in the :hover psuedo-selector...

Because :hover takes precedence, even if .disabled is applied.

Also your javascript should be calling find with .comment_action instead of comment_action

See working example: http://jsfiddle.net/TN4rh/11/

Upvotes: 1

Related Questions