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

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

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 18 total)
  • Author
  • #41052

    I’ve been trying to create a rollover effect that changes the background of a div when hovering over it and also changes the background of another non-adjacent div at the same time using purely CSS. I haven’t been having much luck with this so I thought I would throw it out there for discussion. I was trying some positioning tricks, but wasn’t having much success and was really hoping that someone might have a more simple answer. If anyone has any thoughts I’d love to hear them. Thanks.


    I tried my best but I had to use jQuery, I couldn’t think of another way!

    Maybe someone else can?


    @joshuanhibbert – is my jQuery correct in that pen? It feels like it should be shorter/more concise… (I’m new to jQuery)


    Do you find it’s good to make a variable and cache ‘$(this)’

    Or is anything a preceding ‘$’ good to cache to save on loading speeds?

    I suppose it’s good to try and get in the pattern of always writing good jQuery, even if it’s a small function or not…

    Thanks for the advice :)


    Thanks @ToxicFire – it’s helpful to know :)

    > generally if your using a selector more than once inside the same scope stick it in a var, otherwise each time the selector is parsed its going to the dom.


    Cheers, guys.

    @andy_unleash – I’m sure I watched that video about the swimming pool quote. It is quite a good way to look at it, will start getting used to caching selectors…

    Sorry to take over this thread OP.



    Why is my codepen behaving like this when I have cached ‘$(this)’ as a variable. Is it me being stupid?


    You need to do the

    var $this = $(this);

    Before the hover event.


    Ahh thanks @rainemaida and @andy_unleash

    So variables that aren’t going to change can be declared locally (under document.ready function)

    and variables like ‘$(this)’ always changes so they have to be declared inside the function.

    I see now.

    > I assume you’re just playing with JQuery – cause you could do this same effect using the :hover pseudo class in CSS instead.

    Yes I am just playing around with it, I know that CSS would be a better choice :)


    Cheers for the tips guys!


    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:


    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.


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


    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?


    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?

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