Grow your CSS skills. Land your dream job.

Classes that modify each other on hover

  • # December 18, 2012 at 2:13 pm

    Hi, I´m trying to make to divs from different classes change each others width. If I hover A i´ll change B´s width, and if I hover B i´ll change A´s width.

    I make it work the first way ( hover A) but for some reason I don´t know, because I´m new to css, nothing happens to A when I hover B.

    Here it goes

    < !DOCTYPE html>

    Div a

    Div b

    Thanks

    # December 18, 2012 at 2:34 pm

    The general sibling selector (~) matches all siblings, but only siblings that follow the target in the markup.

    Therefore, b follows a and .a:hover ~ .b finds a match. However, a precedes b, so .b:hover ~ .a has nothing after b to match.

    I suspect you will need to use javascript to achieve this effect.

    # December 18, 2012 at 2:34 pm

    Honestly, I would do this with jQuery. Trying to affect another div get’s tough if they aren’t nested. You could do:

    .a:hover + .b {
    /* CSS */
    }

    But that only works if b comes after a. Or do this if they’re immediately nested:

    .a:hover > b {
    /* CSS */
    }

    Here is a simple js that should be able to manage it for you and it’s a good on to know. It uses jQuery.
    http://jsfiddle.net/kevin11189/GAuzS/1/

    http://jsfiddle.net/kevin11189/GAuzS/1/

    # December 18, 2012 at 2:38 pm

    It can be achieved with classes too. I don’t know why I did all ID’s on that one.
    http://jsfiddle.net/kevin11189/RDHnA/

    If you can throw what you’re trying to do into a jsfiddle or something, I can help you set it up.

    # December 18, 2012 at 3:13 pm

    I got it. I added some transforms and it works!!!!!!!!!

    http://jsfiddle.net/ciro73/CDmFY/9/

    Thanks a lot Kevin.

    Can I use this function inside wordpress? Where?
    Why transformation wont work in internet explorer?

    # December 18, 2012 at 3:26 pm

    Good job. That looks good.
    I’m no wordpress pro. Honestly, I would just add it to the footer.php, but I’m sure someone is going to tell me I’m wrong with that one.
    I’m in the office right now, but I can look into the ie stuff when I get home if someone else hasn’t solved that for you.
    Not a problem, by the way.
    FYI. there is a good chance that WordPress is already loading a jQuery js for you, so make sure you don’t double load it.

    # December 18, 2012 at 6:19 pm

    This is very interesting…. I have no idea why it wasn’t working in jsFiddle, but the exact same code works in codepen… This is odd. I’m curious as to how it will work on a live site. but here is it working in IE in codepen.

    http://codepen.io/kevin11189/pen/rzHkG

    # December 18, 2012 at 6:31 pm

    Only supported in ie10 I guess. I was in different compatibility modes. My mistake.

    # December 18, 2012 at 8:50 pm

    Is it not worth managing the animation just in JQuery anyway since it’s already in use? Transition/Transform support is non-existant in IE8/9 – so perhaps managing the width and the transition via .animate(); with JQuery might be a viable cross browser solution?

    # December 18, 2012 at 9:57 pm

    How exactly should I use .animate();??????

    I have no idea. Can I add .animate() in my existing http://jsfiddle.net/ciro73/CDmFY/9/

    # December 19, 2012 at 10:59 am

    .animate gets a little buggy if you don’t use it with .stop. Here is a pretty good way to do it. I’m not jQuery pro so I had to do a little research. How’s this?

    http://jsfiddle.net/kevin11189/CMWNn/

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

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