- This topic is empty.
November 29, 2012 at 2:30 am #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.November 29, 2012 at 4:19 am #115888
I tried my best but I had to use jQuery, I couldn’t think of another way!
Maybe someone else can?November 29, 2012 at 5:30 am #115890
@joshuanhibbert – is my jQuery correct in that pen? It feels like it should be shorter/more concise… (I’m new to jQuery)November 29, 2012 at 6:47 am #115896
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 :)November 29, 2012 at 7:13 am #115900
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.November 29, 2012 at 7:43 am #115907
@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.November 29, 2012 at 9:47 am #115919
Why is my codepen behaving like this when I have cached ‘$(this)’ as a variable. Is it me being stupid?November 29, 2012 at 10:21 am #115921rainemaidaMember
You need to do the
var $this = $(this);
Before the hover event.November 29, 2012 at 10:34 am #115924
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 :)November 29, 2012 at 10:40 am #115927
Cheers for the tips guys!November 29, 2012 at 11:15 am #97034SenffParticipant
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/cqbGLNovember 29, 2012 at 11:53 am #115930
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 #115932
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 #115934
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 #115936
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?
- The forum ‘CSS’ is closed to new topics and replies.