The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Showing and hiding divs on hover. CSS or jQuery?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • #271562

    I have a question which I’m sure is rather simple, but I can’t quite get the syntax correct. I’ve set up a makehift codepen to explain what I’d like to do.

    I have a frame, inside of which are 3 other divs, all layered on top of each other. I then have 3 links. What I want to have happen is when you hover over one of the links, the corresponding box appears in #frame, and the other 2 boxes are hidden.

    So when I hover over “Show Box 1”, .box1 should have .show appended to it, and .box2 and .box3 should have .hide appended to them.
    Then when you hover over “Show Box 2”, .box2 should have .show appended to it, and .box1 and .box3 should have .hide appended to them.
    I don’t know if jQuery or CSS is the right way to go to solve this, but I was hoping someone might be able to point me in the right direction. Many thanks in advance.


    i added the class “hide” to the boxes

    with css-only have a look


    This is my answer (CSS only):

    I hope you’ll find it useful.


    You can transition the opacity for a nice fade effect (CSS only)

    Tip: Try to use the anchor element only when the “button” links to another page/file. As these don’t, I’ve changed them to button elements (which can still be hovered/tapped on touch devices).

    jQuery, unless you use it a lot for other functions in the rest of your page, might be overkill for what you need. If you wanted to go the JS route, have a look into plain/vanilla JavaScript. There are some handy functions and utilities to get you started here

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.