Why is my hover not working?

[jellevrswk]

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

[PointC]

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.

[PointC]

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. 

[PointC]

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.

[OSUblake]

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.

http://greensock.com/forums/topic/13268-how-to-toggle-tweens-in-a-dry-fashion/?hl=dry#entry55283

 

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

[PointC]

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.

[OSUblake]

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.