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