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');
});

在console.log和hover同时发生border时，div会生成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`。

目的：

{{1}}

有可能吗？如果，那么我希望得到你的亲切帮助..

Answer 1

边界是div，至少部分是。

在我所知道的边界上没有专门盘旋的事件。

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

工作示例：http://jsfiddle.net/jssSA/

<强> HTML

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

<强> CSS

#outer,#inner{width:300px; height:300px;}
#outer{
    background-color:#000;
    padding:10px;
}

#inner{
    background-color:#ccc;
}

<强>的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")});

Answer 2

务实的解决方案是：

<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');
});

最干净的选择imo。一个javascript解决方案会更复杂，根本不值得。

DIV与BORDER悬停问题

2 个答案: