div content will not revert on mouseout after click

[everbeta]

Hi, I am trying to accomplish having the content of a DIV change with both a click (on a text link above the div) and hover event (on the div itself). The DIV content should revert to its original state when the cursor is moved away from the div or the link. The only thing I cannot get to work is to have the DIV content to change back to the original after the link is clicked and then the cursor is moved away from the link (after clicking the link, then moving the cursor off of it, it should return to its original state). The onclick event seems to negate the onmouseout event. If you have any suggestions, please post revised code to codepen; it would be greatly appreciated!

Thanks, Colin

Here is the code: http://codepen.io/anon/pen/jkhrg

[georgearnall]

Your code was too messy to understand on CodePen. In future, don’t use tags such as ``, `` or ``. To include resources you can press the settings icons. Also any Javascript or CSS should go in their respective tabs. It may also help to read [this article](https://css-tricks.com/reduced-test-cases/ “https://css-tricks.com/reduced-test-cases/”).

Anyway I did understand what you mean’t and have written a pen to show you how you could do this with jQuery. Here is the [Pen](http://codepen.io/georgearnall/pen/wuLCK “http://codepen.io/georgearnall/pen/wuLCK”).

Good Luck :)

[Paulie_D]

Much better solution.

It also has the benefit of making the ‘hidden’ text part of the DOM and thus indexable for SEO purposes.

[Author]

Posts