javascript - DIV 与 BORDER 悬停问题

Question

HTML:

<div class="container" style="width:200px; height: 200px; border: 10px solid #ccc"> 
  contents.. 
</div>

JQUERY:

$('.container').hover(function() {
    console.log('in');
},
function() {
    console.log('out');
});

当hover同时发生在border和div上时，它会生成console.log。

目标:

1> Want to make a `hover` event only for `div`, but not for `border`.
2> Fire another `hover` event on `border`, but not for `div`

有可能吗？如果，那么我需要您的热心帮助..

Answer 1

一个务实的解决方案是:

<div class="container" style="width:200px; height: 200px; border: 10px solid #ccc">
   <div class="inner" style="height: 200px;">
       contents.. 
   </div>
</div>

和

$('.container .inner').hover(function() {
    console.log('in');
},
function() {
    console.log('out');
});

我认为是最干净的选择。 JavaScript 解决方案会更复杂，而且根本不值得。