質問: { handlerInOutHandler: function(e) { $('body').toggleClass('zoom'); } }; $(function() { $('a').on('mouseenter mouseleave', main.handlerInOutHandler); }); ``` 以上、ご教授いただけますと幸いです。 どうぞよろしくお願いいたします。
回答: 最初にコメントに書いた通り、`transform-origin`の問題だと思われます。 質問のコードでは変形の原点である`transform-origin`が明示されていないため、`transform`は`body`要素の中心を基準として適用されます。このため`a`要素にマウスをホバーし、`transform`が適用された瞬間に`a`要素の位置が変わり、結果としてすぐに`onmouseleave`が発生することになります。 これに対処するためには`onmouseenter`で`a`の場所に応じた`transform-origin`を設定してやる必要があります。例えばカーソル位置(`e.clientX`, `e.clientY`)を基準にするのであれば ``` $('a').on('mouseenter', function (e) { var p = $('body').offset(); var w = $('body').width(); var h = $('body').height(); var xr = (e.clientX - p.left) / w; var yr = (e.clientY - p.top) / h; var origin = (100 * xr).toString() + '% ' + 100 * yr + '%'; $('body').addClass('zoom').css({ '-webkit-transform-origin': origin, 'transform-origin': origin }); }); ``` のように計算してやる必要があります。上では単位に`%`を使用していますが、`px`でもよいです。またリンクの中心(`$(this).offset().left + $(this).width() / 2`)を基準とすることもできます。