Grow your CSS skills. Land your dream job.

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

  • # November 29, 2012 at 2:30 am

    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

    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?

    # November 29, 2012 at 5:05 am

    Yeah, JavaScript is definitely the way to go.

    # November 29, 2012 at 5:30 am

    @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:29 am

    @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

    # November 29, 2012 at 6:47 am

    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:03 am

    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.

    # November 29, 2012 at 7:13 am

    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:15 am

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

    # November 29, 2012 at 7:22 am

    ehh its just best practice

    http://www.jameswiseman.com/blog/2010/04/20/jquery-standards-and-best-practice/

    # November 29, 2012 at 7:43 am

    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.

    # November 29, 2012 at 9:47 am

    @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

    # November 29, 2012 at 10:21 am

    You need to do the

    var $this = $(this);

    Before the hover event.

    # November 29, 2012 at 10:25 am

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

    # November 29, 2012 at 10:34 am

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

Viewing 15 posts - 1 through 15 (of 25 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".