Search code examples
csstransformscaleonmouseover

setting the hitbox when using css transform:scale(x);

Is it possible to set the hitbox of an element when using -webkit-transform:scale(4);?

http://jsfiddle.net/bnA7L/

In the jsfiddle example above I have two divs. WHen you rollover one, you need to move your mouse to the edge of the new boundary to get it to return to its original size.

I want it to return to its original size as soon as the user's mouse moves out of the original hitbox.

Solution

  • It can be done in CSS when you add 2 children for each div. Child 1 doesn't scale and acts as hitbox. Child 2 scales, only when you hover over child 1.

    http://jsfiddle.net/willemvb/q7vbD/