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 - it's pretty concise, the only thing you could do is cache the selectors and use toggleClass, but that's just being pedantic as it is a small function.
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.
There will be senario's where jquery simply can be overkill for a small function, if jquery isn't needed else where you have to stick in the library for that one small function. Big overhead for small gain.
There is a way to acheive the same affect using css alone depending on how the dom is arranged and using how hover propogates up the tree and sibling selectors. But is inefficient, jquery is the quickest cleanest way.
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 - The best analogy I heard for it is when Jeffrey Wey said to imagine the DOM (document object model) as a swimming pool. Every time you call a selector you're jumping into the swimming pool to grab it and climbing back out.
If you know you're going to need to use selectors more than once, you cache it, so instead of jumping in over and over, you just jump in the once and then you stick it in a photocopier. So you don't get wet quite so often and it's faster.
The reason for using a $ with the made up variables. Like $this = $(this) is because it indicates to people later that it's a jquery object, rather than a string. So for example, if you did box1 = $('box-one'); someone might not realise it's a jquery object later in use. But using $box1 exclaims to people what it's for.
@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...
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
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.
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?
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!
http://codepen.io/Watson90/pen/InwzJ
Maybe someone else can?
Yeah, JavaScript is definitely the way to go.
@joshuanhibbert - is my jQuery correct in that pen? It feels like it should be shorter/more concise... (I'm new to jQuery)
@Watson90 - it's pretty concise, the only thing you could do is cache the selectors and use toggleClass, but that's just being pedantic as it is a small function.
Update codepen here: http://codepen.io/andyunleashed/pen/kvwht
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 :)
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.
There will be senario's where jquery simply can be overkill for a small function, if jquery isn't needed else where you have to stick in the library for that one small function. Big overhead for small gain.
There is a way to acheive the same affect using css alone depending on how the dom is arranged and using how hover propogates up the tree and sibling selectors. But is inefficient, jquery is the quickest cleanest way.
Thanks @ToxicFire - it's helpful to know :)
@Watson90 - The best analogy I heard for it is when Jeffrey Wey said to imagine the DOM (document object model) as a swimming pool. Every time you call a selector you're jumping into the swimming pool to grab it and climbing back out.
If you know you're going to need to use selectors more than once, you cache it, so instead of jumping in over and over, you just jump in the once and then you stick it in a photocopier. So you don't get wet quite so often and it's faster.
The reason for using a $ with the made up variables. Like $this = $(this) is because it indicates to people later that it's a jquery object, rather than a string. So for example, if you did box1 = $('box-one'); someone might not realise it's a jquery object later in use. But using $box1 exclaims to people what it's for.
ehh its just best practice http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/
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.
@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
You need to do the
Before the hover event.
@watson90 - It's because $this = $(this) needs to be declared inside each function, as $(this) is different each time.
What you could do to consolidate that code is http://codepen.io/andyunleashed/pen/fpeiK
Edit: I assume you're just playing with JQuery - cause you could do this same effect using the :hover pseudo class in CSS instead.
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.
Yes I am just playing around with it, I know that CSS would be a better choice :)
@Watson90 - Yep absolutely right. No worries on the CSS, was just checking - figured you were just playing around with JQuery :)
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: http://codepen.io/senff/pen/cqbGL
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?
@2footlong: yes, you'll just have to add a level deeper: http://codepen.io/senff/pen/AmCqd
Senff, Awesome!! Thank you so much! And my disappearing headache thanks you! This is exactly what I was looking for.
Nice work @Senff!