2

I have assigned a hover state to certain element using css. After a particular event I want to change that hover state using jQuery. I want to change :hover class selector that i have mentioned in css file. I knwo i can implement using .hover function but I don't want to use that because this is not suitable with my application. In my application this change in hover state is for certain time that means after that certain time I have to unbind the hover event. But in my app there are many conditional module where i need to call this unbind event. Many inefficient calls to unbind what I don't want. 

elem {
  width:10px;
}
elem:hover {
  width:20px;
}

I want to change width of the hover state from say 20px to 40px. I want to use something simple like .css('width','100px') but how to call this function on :hover selector.

Improve this question
6
  • Can you not just change the elem:hover rule in the CSS? I don't think that hover() would be less efficient than any other method you apply. Commented Jun 9, 2012 at 10:58
  • Why you a not using CSS for this goal? Commented Jun 9, 2012 at 10:58
  • @David, I am not saying that hover() is inefficient in direct sense. Actually in my app I have to do the same thing with hover,focus,active. So instead of calling bind and unbind many times is there any way to simplify this in one or two step. May be something like adding or removing class Commented Jun 9, 2012 at 11:01
  • @Vladimir, I have change that dynamically, say on the basis of current width available on the page. Commented Jun 9, 2012 at 11:02
  • @knoxxs width can be set relatively to parent div (say in %), or with mediaqueries Commented Jun 9, 2012 at 11:05

3 Answers 3

Reset to default
2

As far as I know, you can influence hover only with hover event:

$('#selector').hover( 
  function() { $(this).css('width','100px'); }, 
  function() { $(this).css('width','10px'); }
});

As an alternative you may want to use addClass and removeClass, to assign css classes to given elements dynamically, so basically when want your element to have hovered css class you do:

$('#selector').addClass('hovered');

and went you want your element to have have normal class you do:

$('#selector').removeClass('hovered');

This won't really replace hover event, but this way you can change css classes whenever you want.

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

4 Comments

Can you give example of add class or remove class for changing hover state?
I have edit my answer, adding or removing css classes don't depend on hover state, you can use them whenever you want.
this is adding class to selector not to its hovered state. Any css that i have mentioned in hovered class will also affect non-hover state, actually to all states.
Indeed it will work this way, but still, each class which you add or remove can have its own hovered state (.hovered:hovered), can't it?
1

You could load another stylesheet that overrides the elem:hover definition (or append a style node to head) and

elem:hover {
    width: 100px !important;
}

Here's a question to that effect.

(Constantly binding and unbinding a hover event sounds suspicious, though. You might want to consider whether the behavior that caused you to post this question isn't itself the problem.)

Improve this answer

1 Comment

Actually that will work. But I hope we can do same thing using @mediaqueries. Is i posSible?
0

you could add a class using jQuery which has a hover selector applied to it in your css.

e.g.

elem {
  width:10px;
}
elem:hover {
  width:20px;
}
elem.jsApplied:hover {
  width:40px;
}
Improve this answer

1 Comment

and also to elem.jsApplied { width:40px; } . What I want is to add class only to hover. Means I want to only change the hover width.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.