javascript - jQuery の hover() イベントのホットスポットに要素のマージンを含めるにはどうすればよいですか?

Question

   jQuery(".my_container").hover(function(){
    //do code
   }, function(){
    //do code
   });

.my_container { width: 100px; height: 100px; margin: 50px; }

上記のコードは、マージンの上にマウスを置いても反応しません (マージンは要素の一部ではありませんか?) - どうすればそれを変更できますか?

Answer 1

代わりに50pxの透明な境界線を使用することもできます-マージンは実際にはマウス可能であるとは想定されていません...

Answer 2

おそらく、外側の要素にパディングを設定した 2 番目のラッパー要素を使用し、内側の要素に既存の背景とパディング スタイルを使用します。

<div class="my_container">
    <div class="my_container_inner">
        <!-- etc. -->
    </div>
</div>

jQuery(".my_container").hover(function(){
  //do code
}, function(){
  //do code
});

.my_container { padding: 50px; }
.my_container_inner { width: 100px; height: 100px; /* etc. */ }

Answer 3

マージンをパディングに変更すると、ホバー可能になります。