jquery - jqueryでのマウスホバリングの問題

Question

私はホバー効果に取り組んでいます。ホバリングするとサイズが変化しますが、h3テキストを含む行のどこかにマウスをホバーするとサイズが変化するという問題があります。

h3テキストにマウスを置いたときにのみ機能するようにしたいと思います。

2 つ目の問題は、その位置が絶対的ではないということです。つまり、ホバリングが行われると、近くのものの位置が変更されます。

これは私のjqueryコードです:

var bindBehaviors = function (scope) {
        $('h3',scope).hover(
        function () {
        $(this).css("font-size", "40px");
        },
       function () {
       $(this).css("font-size", "25px");
       }
       );
       }
       bindBehaviors(this);

Answer 1

に a を入れてみて<span>ください<h3>:

<h3>
    <span>Text</span>
</h3>

代わりに、イベントをスパンにバインドします。

var bindBehaviors = function(scope) {
    $('h3 span', scope).hover(function () {
        $(this).css("font-size", "40px");
    }, function () {
        $(this).css("font-size", "25px");
    });
}

bindBehaviors(this);