javascript - 如何在悬停时检测上一个元素

Question

你能看看这个演示，让我知道id当鼠标悬停时如何检测前一个元素#box-5？

例如，我想控制台记录鼠标移动到的每个 div 的 id#box-5

$("#box-5").hover(function(){
   console.log("Entering From ...")
    }, function(){
    
});

body {
  padding: 20px;
}
#box{
  width:320px;
  height:300px;
}
.map{
  height:100px;
  width:100px;
  border:1px solid #ccc;
  float:left;
}
#box-5{
  background:khaki;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div id="box-1" class="map"></div>
<div id="box-2" class="map"></div>
<div id="box-3" class="map"></div>
<div id="box-4" class="map"></div>
<div id="box-5" class="map"></div>
<div id="box-6" class="map"></div>
<div id="box-7" class="map"></div>
<div id="box-8" class="map"></div>
<div id="box-9" class="map"></div>
</div>

标签： javascriptjqueryhtml

Answer 1

跟踪变量中最后一个悬停的元素，并在每次悬停这些元素之一时更新它

$("#box-5").hover(function(){
   console.log("Entering From ..." + last_box)
    }, function(){
    
});

var last_box = null;
$('.map').hover(function(){
   if($(this).attr('id') != 'box-5'){
       last_box = $(this).attr('id');
   }
})

body {
  padding: 20px;
}
#box{
  width:320px;
  height:300px;
}
.map{
  height:100px;
  width:100px;
  border:1px solid #ccc;
  float:left;
}
#box-5{
  background:khaki;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div id="box-1" class="map"></div>
<div id="box-2" class="map"></div>
<div id="box-3" class="map"></div>
<div id="box-4" class="map"></div>
<div id="box-5" class="map"></div>
<div id="box-6" class="map"></div>
<div id="box-7" class="map"></div>
<div id="box-8" class="map"></div>
<div id="box-9" class="map"></div>
</div>