增加鼠标离开区域的大小

increase size of mouseleave area

本文关键字：区域 鼠标 离开 增加      更新时间：2023-09-26
<http://jsfiddle.net/RBJ9R/1504/>

我希望鼠标离开触发区域的大小增加以包括图像以及原始鼠标输入区域（灰色框）。我希望用户在将鼠标悬停在图像区域时仍然能够看到图像。

谢谢！ 

#slender-trigger {
background-color: #CCC;
height: 100px;
width: 120px;
margin-left: 0px;
margin-top: 50px;
position: absolute;
}
#slender {
font-family: 'Strait', sans-serif;
height: 400px;
width: 400px;
border: thin dotted #F00;
position: absolute;
margin-top: 50px;
margin-left: 120px;
display: none;  
}

<div class="purchasing-tips">
<div id="slender-trigger">nnnn</div> 
<div id="slender" style="background-image:url(http://lorempixel.com/120/100/people); height: 100px; width: 120px; border: 1px solid black;">sadfasdf</div>
</div>
$("#slender-trigger").on("mouseenter", function() {
  $("#slender").show();
}).on("mouseleave", function() {
  $("#slender").hide();
});

简单地这样写：

    $("#slender-trigger, #slender").on("mouseenter", function() {
      $("#slender").show();
}).on("mouseleave", function() {
      $("#slender").hide();
});

这是JSFIDDLE

相关文章：