jQuery memoize css for hover effect

Question

I want to create a hover effect for an element but want the pre-hover CSS for the element to be the same as before, when hovering out again. So, I don't want to inadvertantly override prior styles when hovering out of the element again. In other words - an easy way to memoize the css state of an element and to restore that state later.

Ideas?

You cannot just use `:hover` or an additional class that you apply on `hover`? — m90, May 06 '12 at 09:15
m90: They might need to trigger the hover style when an element receives keyboard focus (e.g. for accessibility the user mightn't be using the mouse). — Sly_cardinal, May 06 '12 at 09:17

score 2 · Answer 1 · answered May 06 '12 at 09:16

2

Trigger your hover CSS by applying a specific class to the elements.

Then when your hover is complete remove the hover class.

This lets CSS handle the style overriding and restoration for you.

answered May 06 '12 at 09:16

Sly_cardinal

12,270
5
49
50

Thanks! Answer rewarded to sha404 because he was a minute faster. But thanks to both of you for quick and very useful answers! :-) – Bent Rasmussen May 06 '12 at 09:29

score 2 · Accepted Answer · answered May 06 '12 at 09:16

2

just create a new css class. and on hovering, use addClass(_thatclass_) and when hovering out use removeClass(_thatclass_)

answered May 06 '12 at 09:16

sha256

3,029
1
27
32

I think this is the best suggestion so far. Makes a lot of sense. Thanks! – Bent Rasmussen May 06 '12 at 09:28

score 2 · Answer 3 · answered May 06 '12 at 09:20

Can you do it in pure CSS, using :hover? If you can you should, and it restores the old CSS when not hovering automatically.

See this example, all divs have a border that gets bigger when you hover, and shrinks back to normal when you stop hovering. I'll put the CSS here, so this answer is self-contained:

div {
   border: 2px solid red;
}

div:hover {
  border-width: 10px;
}

(Note that you can use hover anywhere within your selectors, not just at the end e.g. #myID:hover .childClass)

No, because I want to create a hover effect on another element when hovering over a given element. But good suggestion given lack of context. — Bent Rasmussen, May 06 '12 at 09:27

jQuery memoize css for hover effect

3 Answers3