DIV与边界悬停问题

DIV with BORDER Hover problem

本文关键字：问题 悬停 边界 DIV      更新时间：2023-09-26

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

当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`

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

一个实用的解决方案是：

<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，至少部分是这样。

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

您可以做的是有一个嵌套的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")});
相关文章：