Forums

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

    # November 29, 2012 at 10:40 am

    Cheers for the tips guys!

    # November 29, 2012 at 11:15 am

    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

    # November 29, 2012 at 11:53 am

    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

    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

    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

    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?

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

You must be logged in to reply to this topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag