Jquery div在不应该隐藏时隐藏'；T

我有一个图像，当我将鼠标悬停在它上面时，选项会显示在它下面。当我向下移动到它们隐藏的选项时。我已经将slideUp设置为在用户离开父div之前不会发生

$('.file-options').hide();
$('.file a img').mouseover(function(){
    $(this).closest('.file').find('.file-options').slideDown();
});
$('.file a img').closest('.file').mouseout(function(){
    $(this).find('.file-options').slideUp();
});

<div class="document">
  <div class="file">
    <a href="#"><img src="http://www.dermalog.com/images/pdf-icon.png" alt=""></a>
    <div class="file-options showhouse-text">
        <a href="#" onclick="return confirm('Are you sure you want to delete this file?');" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Delete File">D</a>
        <a href="#" class="show-tooltip" data-html="true" data-placement="top" data-original-title="Edit File">E</a>
    </div>
  </div>
</div>

$（'.file options'）.hide（）；
$（'.file a img'）.mouseover（函数（）{
$（this）.closest（'.file'）.find（'.file options'）.slideDown（）；
});
$（'.file a img'）.closest（'.file'）.mouseout（函数（）{
$（this.find（'.file options'）.slideUp（）；
});

---

这里是jsfiddle

来自

的

mouseout

事件冒泡到

.file

元素，因此触发代码隐藏

。使用

mouseleave

事件（不会对冒泡事件做出反应）代替：

---

来自

的

mouseout

事件冒泡到

.file

元素，因此触发代码隐藏

。使用

mouseleave

事件（不会对冒泡事件做出反应）代替：

---

或您可以这样做：演示

检查

if（！$（this）.is（':hover'）{

希望这有助于

：）

代码

$('.file-options').hide();

$('.file a img').mouseover(function () {
    $(this).closest('.file').find('.file-options').slideDown();
});

$('.file a img').closest('.file').mouseout(function (e) {
    if(!$(this).is(':hover')) {
        $(this).find('.file-options').slideUp();
    }
});

---

或您可以这样做：演示

检查

if（！$（this）.is（':hover'）{

希望这有助于

：）

代码

$('.file-options').hide();

$('.file a img').mouseover(function () {
    $(this).closest('.file').find('.file-options').slideDown();
});

$('.file a img').closest('.file').mouseout(function (e) {
    if(!$(this).is(':hover')) {
        $(this).find('.file-options').slideUp();
    }
});

---

你就快到了……试试这个：

$('.file-options').hide();

$('.file').mouseover(function(){
    $(this).find('.file-options').slideDown();
});

$('.file').mouseout(function(e){
    if($(e.toElement).parents('.file').length < 1) {
       $(this).find('.file-options').slideUp();
    };
});

$（'.file options'）.hide（）；
$（'.file'）.mouseover（函数（）{
$（this.find（'.file options'）.slideDown（）；
});
$（'.file'）.mouseout（函数（e）{
if（$（e.toElement）.parents（'.file'）.length<1）{
$（this.find（'.file options'）.slideUp（）；
};
});

---

你就快到了。试试这个：

$('.file-options').hide();

$('.file').mouseover(function(){
    $(this).find('.file-options').slideDown();
});

$('.file').mouseout(function(e){
    if($(e.toElement).parents('.file').length < 1) {
       $(this).find('.file-options').slideUp();
    };
});

$（'.file options'）.hide（）；
$（'.file'）.mouseover（函数（）{
$（this.find（'.file options'）.slideDown（）；
});
$（'.file'）.mouseout（函数（e）{
if（$（e.toElement）.parents（'.file'）.length<1）{
$（this.find（'.file options'）.slideUp（）；
};
});

---

$（'.file'）.mouseleave（）足够了，不是吗？为什么不
$（'.file:has（一个img'））.mouseleave
为什么mouseout做得不对而mouseleave是对的？@mikakun可能，尽管他们可能还有其他
.file
元素不想绑定此功能。选择器可以满足他们的需要，即使有可能更好的选择，所以我没有更改它们。@PierceMegeough应该这样做解释它；本质上，它们不会对事件冒泡做出反应（与mouseout不同），因此源自
的事件不会导致绑定到
.file
的事件处理程序触发。它不是标准事件（仅IE），因此它由jQuery为其他浏览器模拟。
$（'.file'）.mouseleave（）
够了吧？为什么不
$（'.file:has（一个img'））.mouseleave
为什么mouseout做得不对而mouseleave是对的？@mikakun可能，尽管他们可能还有其他
.file
元素不想绑定此功能。选择器可以满足他们的需要，即使有可能更好的选择，所以我没有更改它们。@PierceMegeough应该这样做解释它；本质上，它们不会对事件冒泡做出反应（与mouseout不同），因此源自
的事件不会导致绑定到
.file
的事件处理程序触发。它不是标准事件（仅IE），因此它由jQuery为其他浏览器模拟。