The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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

  • # November 29, 2012 at 10:37 am

    This reply has been reported for inappropriate content.

    @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:

    # 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:

    # 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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed