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

[Historical Forums User]

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.

[Watson90]

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

http://codepen.io/Watson90/pen/InwzJ

Maybe someone else can?

[Watson90]

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

[Watson90]

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

[Watson90]

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.

[Watson90]

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.

[Watson90]

@andy_unleash

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

http://codepen.io/Watson90/pen/icAFl

[rainemaida]

You need to do the

var $this = $(this);

Before the hover event.

[Watson90]

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

[Watson90]

Cheers for the tips guys!

[Senff]

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

[Historical Forums User]

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.

[Watson90]

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

[Historical Forums User]

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?

[Historical Forums User]

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?

[Author]

Posts