Javascript 带边界悬停问题的DIV

HTML:

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

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

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`

当

悬停

出现在

边框

和

div

上时，它会使

控制台.log

目标：

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

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

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`

---

有可能吗？如果，那么我需要你的真诚帮助。

边界是div，至少部分是这样

据我所知，没有专门在边境上空盘旋的活动

您可以做的是有一个嵌套的div（在另一个div中），并在内部div上有一个10px的填充。这将为您提供2个div来处理和应用悬停事件，以及查看所需的方式

工作示例：

HTML

<div id="outer">
    <div id="inner">Some content</div>
</div>

jQuery

$('#outer').hover(function(){
          console.log("outer in")},
          function(){console.log("outer out")});

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

---

边界是div，至少部分是这样

据我所知，没有专门在边境上空盘旋的活动

您可以做的是有一个嵌套的div（在另一个div中），并在内部div上有一个10px的填充。这将为您提供2个div来处理和应用悬停事件，以及查看所需的方式

工作示例：

HTML

<div id="outer">
    <div id="inner">Some content</div>
</div>

jQuery

$('#outer').hover(function(){
          console.log("outer in")},
          function(){console.log("outer out")});

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

---

务实的解决办法是：

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

---

最干净的选择。javascript解决方案会更复杂，根本不值得。实用的解决方案是：

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

---

最干净的选项。javascript解决方案会更复杂，根本不值得。border是div的一部分。更好的方法是将一个div放入另一个div，并使用padding“模拟”边框。border是div的一部分。更好的方法是将一个div放入另一个div，并使用padding“模拟”边框。