1 Replies - 424 Views - Last Post: 24 May 2016 - 11:05 PM

#1 Ostralis  Icon User is offline

  • #include <greeter>
  • member icon

Reputation: 9
  • View blog
  • Posts: 562
  • Joined: 13-December 08

CSS transition on hover of another div

Posted 24 May 2016 - 03:39 PM

Okay, so it's been a bit since I've gotten back into the code game (I'm a little rusty, forgive me). I'm currently working as a UX/UI designer. Our focus is primarily on design, and then we pass those off to our front-end developers. I really just want to make it a bit easier on their lives every now and again, so I've taken to writing small snippets (like this arrow), that I'll handoff to them.

I know I'm on track and I've created the animation when you hover on the arrow. I want that animation to be triggered when you hover on both the arrow and the text, but I can't seem to figure it out. I know the solution is right in front of my eyes, but maybe a fresh set of eyes will help.

http://codepen.io/shuta/pen/dXbyWz

Thanks!

Is This A Good Question/Topic? 0
  • +

Replies To: CSS transition on hover of another div

#2 Martyr2  Icon User is offline

  • Programming Theoretician
  • member icon

Reputation: 5078
  • View blog
  • Posts: 13,705
  • Joined: 18-April 07

Re: CSS transition on hover of another div

Posted 24 May 2016 - 11:05 PM

Put this in your CSS...

.h1:hover + .arrow {
  width: 20%;
}



Here you are saying when hovering over the h1 element, select the next element with .arrow as a class and set it to 20% which will then trigger your transition set on that element.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1