Forums

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
    Posts
  • #271562
    dougfromaccounting
    Participant

    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. https://codepen.io/pete-hudack/pen/PegYRo

    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.

    #271564
    chris_2080
    Participant

    i added the class “hide” to the boxes
    https://codepen.io/chris3000/pen/rvbYQP

    with css-only have a look
    http://jsfiddle.net/unknown601/bk64sLa6/1/

    #271565
    Pogany
    Participant

    This is my answer (CSS only):
    https://codepen.io/giaco/pen/XqQZZe?editors=1100

    I hope you’ll find it useful.

    #271567
    Beverleyh
    Participant

    You can transition the opacity for a nice fade effect (CSS only) https://codepen.io/anon/pen/pVBVOM

    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 https://plainjs.com/javascript/

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