Grow your CSS skills. Land your dream job.

Can pure CSS be used to change the background of multiple divs during a rollover?

  • # November 29, 2012 at 10:37 am

    @Watson90 – Yep absolutely right. No worries on the CSS, was just checking – figured you were just playing around with JQuery :)

    # November 29, 2012 at 10:40 am

    Cheers for the tips guys!

    # November 29, 2012 at 11:15 am

    To get back to the original question: yes, it can be done with pure CSS. The only extra requirement is a wrapping div around both blocks: http://codepen.io/senff/pen/cqbGL

    # November 29, 2012 at 11:53 am

    Thank you Senff!!! That’s exactly what I was looking to achieve. My headache is gone… :) Now to see if it will work on divs that aren’t exactly adjacent to each other. I’m assuming it will. Thank you again.

    # November 29, 2012 at 12:27 pm

    As long as you target the class names of the box(s) you want to change it will work anywhere on the page @2footlong.

    # November 29, 2012 at 12:49 pm

    Hey Senff, I have one last question for you on this since you were the one to most closely answer the question I originally posted. Using the example you linked to in your post, I was able to add a third div and get it to change by rolling over either of the first two, but is there a way (if using three inner divs) to roll over the first div and change the background of the third div to a specific color, then roll over the second div and again change the background of the third div only to a different color?

    # November 29, 2012 at 12:54 pm

    Thanks Watson. I got this really close to doing what I want it to. Any ideas on changing that code to make it do what i posted above?

    # November 29, 2012 at 12:58 pm

    @2footlong: yes, you’ll just have to add a level deeper: http://codepen.io/senff/pen/AmCqd

    # November 29, 2012 at 1:31 pm

    Senff, Awesome!! Thank you so much! And my disappearing headache thanks you! This is exactly what I was looking for.

    # November 29, 2012 at 2:39 pm

    Nice work @Senff!

Viewing 10 posts - 16 through 25 (of 25 total)

You must be logged in to reply to this topic.

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