Jump to content


Why is my hover not working?

Go to solution Solved by PointC,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

In my last post I was struggeling with getting an on click event work within an svg image. This problem is solved, but now I'm struggeling with getting a hover to work.


Here is what I my code to do:

When you press one of the buttons, for example $yellowbutton, all the colored blocks except for the $yellowblock will get opacity 0. $yellowblock will get opacity 1. This is the part that is allready working. Now what I want it to do is when a button is pressed and thus a certain colored block is shown, when hovered over this block it enlarges. 


The code I've used to get this to work is based on

See the Pen qdgNdL by ihatetomatoes (@ihatetomatoes) on CodePen

. For now, only the orange block is working, but this might be because the orange block is the first visible block in the svg image.

See the Pen rxVQLE by jellevrswk (@jellevrswk) on CodePen

Link to comment
Share on other sites

Hi jellevrswk  :),


This is just a stacking order problem of the squares in the SVG you're using since they all occupy the same space. You'll notice that the orangebox hover works correctly because it is in top. When you set the opacity of the other boxes to 0, they are still there (you just can't see them) so a hover won't work.


Instead of tweening the opacity to 0, try tweening the autoAlpha to 0. When autoAlpha reaches 0, it will automatically set the visibility of the element to hidden as well as set it's  opacity to 0.

  TweenLite.to([$orangeblock, $redblock, $blueblock, $greenblock], 0.3, {
    autoAlpha: 0,

Change each of those opacity tweens to the code I'm showing above and it should work just fine.


Happy tweening. :)

  • Like 1
Link to comment
Share on other sites

PS - then when you bring them back, you'll have to tween to autoAlpha:1 otherwise they'll stay hidden. :)


Simple answer - just change all opacity tweens to autoAlpha tweens.


See the Pen VevWee by PointC (@PointC) on CodePen



Edit: That's the simple solution. I see Blake is viewing the topic now and I'm betting he's going to show a loop and array solution which will be much nicer.  ;)

  • Like 1
Link to comment
Share on other sites

  • Solution

Hey again jellevrswk   :),


I guess I was wrong. I thought Blake was going to post something. Anyway, I thought I'd take a shot at reducing your pen and save you from having to declare all those variables and duplicate tweens. By using a couple of jQuery arrays and each() on the buttons you can make it quite a bit shorter and simpler.


I'm still learning quite a bit myself, but I thought maybe this would help you. The mods could probably tighten up the code even more, but this is what I came up with:


See the Pen EPVXQa?editors=101 by PointC (@PointC) on CodePen


Hopefully, that helps a bit. Happy tweening. :)

  • Like 1
Link to comment
Share on other sites

Haha! You figured me out PointC. I was in the middle of posting something, but got interrupted by a call.


I was going to suggest for jellevrswk to check out that thread about keeping stuff DRY (Don't Repeat Yourself). It looks like you did a pretty good job of doing just that.



So using the pattern from that thread, you could create your animations like this. It's a little more code than PointC's demo, because it's reusing tweens instead of creating new ones.

See the Pen ?editors=001 by osublake (@osublake) on CodePen

  • Like 2
Link to comment
Share on other sites

Ha! I knew it! :)


That's cool how you did that. I'm going to take a deeper look at your version and learn some new stuff. 


That's one of the things that's so great about this forum. You see so many different ways of getting to a similar result.

  • Like 1
Link to comment
Share on other sites

I totally agree! Seeing different perspectives and ways of doing things is really helpful. If you ask 10 people with the same skillset to create the same thing, you should end up with 10 completely different solutions. That's why it's real easy to catch students cheating in college. Changing the names of some variables in your code isn't enough.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.