Grow your CSS skills. Land your dream job.

div content will not revert on mouseout after click

  • # July 11, 2013 at 11:22 am

    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

    # July 11, 2013 at 12:21 pm

    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](http://css-tricks.com/reduced-test-cases/ “http://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 :)

    # July 11, 2013 at 12:24 pm

    Much better solution.

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".