- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
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?
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.
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/
This is my answer (CSS only):
https://codepen.io/giaco/pen/XqQZZe?editors=1100
I hope you’ll find it useful.
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/