How to hover/animate one element and animate another?

[azukizero]

Hi all,

I’ve found some amazing tips here so, thanks for sharing all of the great advice! I’m trying to animate a few nav elements now and would like to know if what I’d like to do is even possible in CSS.

Basically, I have a nav element hover animation. When hovering over that element, I’d like it to trigger the animation of a different, sibling element. I can’t seem to get both animations working. Here’s the nav element I have animating on hover now:

Code:

nav ul .nav-about { left:0px;
background: url(assets/navFlagAbout.png) no-repeat;
background-position: 0px -187px;
height:100%;
width:110px;
margin:0px;
padding:0px;
overflow:hidden;
position: absolute;
cursor: pointer;
-webkit-transition: background-position .2s ease-in-out;
-moz-transition:background-position .2s ease-in;
-o-transition:background-position .2s ease-in;
-ms-transition:background-position .2s ease-in;
transition:background-position .2s ease-in;
}
nav ul .nav-about:hover { left:0px;
background: url(assets/navFlagAbout.png) no-repeat;
background-position: 0px 0px;
cursor: pointer;
-webkit-transition: background-position .2s ease-in-out;
-moz-transition:background-position .2s ease-in;
-o-transition:background-position .2s ease-in;
-ms-transition:background-position .2s ease-in;
transition:background-position .2s ease-in;
}

Here’s the other animation (a logo) that I’d like to trigger when the above element is hovered:

Code:

#logo div:nth-child(2) {
-webkit-transition: -webkit-mask-position .2s ease-in-out;
-webkit-mask-size: 380px 40px;
-webkit-mask-position: -183px 0px;
-webkit-mask-image: url(assets/logoColorBlack.png);
}
#logo div:nth-child(2):hover {
-webkit-mask-position: 0px 0px;
}

Both the nav and logo are in a parent “header” div but they aren’t near each other in the layout. I’ve tried both ‘+’ and ‘~’ without success. The example 6 on this page http://www.the-art-of-web.com/css/css-animation/ was the inspiration for this idea but what I’m trying to do is slightly more complex (I think). Is it even possible?

Thanks again for any ideas!

[joshuanhibbert]

Are you able to paste everything you have so far into a jsFiddle with absolute paths for the images?

[jstam]

The only way I can think to do this is by using keyframes. But to get the first element to “trigger” the second animation you’d have to establish a parent-child relationship in the markup. So your #logo element would have to be a child of .nav-about element. That way you could trigger the second animation with the :hover pseudo class.

I attempted this on a fiddle, but took some liberties with your original markup and replaced images for background colors. I may be completely off. But it seems to work with the requirements you listed. jsfiddle.net/jstam/2cdaV

Hope that helps!

[Author]

Posts