Question

我在使用此功能时遇到问题。我希望#login在鼠标悬停在#pink之后显示，并且当我将鼠标悬停在#login上时仍然可见，但当我将鼠标悬停在＃green，＃yellow，＃purple或我的#buttons容器外时，它会消失。

我的问题是当我将鼠标悬停在#green，＃yellow和#purple上时

<div id="buttons">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
    <div id="login"></div>
</div>

<script>
  $('#four').mouseover(function () {
    $('#login').show();
  });

  $('#buttons').mouseleave(function () {
    $('#login').hide();
  });
</script>

jsfiddle

Answer 1

使用这样的结构：

<div id="buttons">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four">
      <div id="login"></div>
  </div>        
</div>

然后你就可以实现这样的功能：

$('#four').mouseover(function () {
    $('#login').show();
}).mouseleave(function () {
    $('#login').hide();
});

Answer 2

只有添加以下行才能实现CSS：

#login:hover,
#four:hover ~ #login { display:block }

#buttons {
    width: 160px;
    background: blue;
}
#one {
    float: left;
    width: 40px;
    height: 40px;
    background: green;
}
#two {
    float: left;
    width: 40px;
    height: 40px;
    background: yellow;
}
#three {
    float: left;
    width: 40px;
    height: 40px;
    background: purple;
}
#four {
    float: left;
    width: 40px;
    height: 40px;
    background: pink;
}
#login {
    height: 100px;
    background: orange;
    display: none;
}
#login:hover,
#four:hover ~ #login { display:block }

<div id="buttons">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four"></div>
    <div id="login"></div>
</div>

Answer 3

查看jsfiddle

上的更新代码

$('#four,#login').mouseover(function () {
    $('#login').show();
}).mouseleave(function(){
   $('#login').hide();
});

Answer 4

这就是你需要的： Fiddle

<div id="buttons">
    <div id="one"></div>
    <div id="two"></div>
    <div id="three"></div>
    <div id="four" class="toggle"></div>
    <div id="login" class="toggle"></div>
</div>


$('.toggle').mouseover(function () {
    $('#login').show();
});

$('.toggle').mouseleave(function () {
    $('#login').hide();
});

Answer 5

您也可以尝试这样做： Demo

$('#one,#two,#three').mouseover(function () {
    $('#login').hide();

});

Answer 6

您可以使用像

这样的计时器

＆＃13;

jQuery(function($) {
  var $target = $('#login');
  $('#four').hover(function() {
    clearTimeout($target.data('hoverTimer'));
    $target.stop(true, true).slideDown(500);
  }, function() {
    var timer = setTimeout(function() {
      $target.stop(true, true).slideUp();
    }, 200);
    $target.data('hoverTimer', timer);
  });

  $target.hover(function() {
    clearTimeout($(this).data('hoverTimer'));
  }, function() {
    $(this).stop(true, true).slideUp();
  });
});

＆＃13;

#buttons {
  width: 160px;
  background: blue;
}
#one {
  float: left;
  width: 40px;
  height: 40px;
  background: green;
}
#two {
  float: left;
  width: 40px;
  height: 40px;
  background: yellow;
}
#three {
  float: left;
  width: 40px;
  height: 40px;
  background: purple;
}
#four {
  float: left;
  width: 40px;
  height: 40px;
  background: pink;
}
#login {
  height: 100px;
  background: orange;
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="buttons">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
  <div id="four"></div>
  <div id="login"></div>
</div>

＆＃13;

Answer 7

你可以使用css来做到这一点

<style type="text/css">
#logo {
    display:none
}
#pink:hover + #logo, #logo:hover {
    display:block;
}
</style>


<div id="pink">pink</div>
<div id="logo">LOGO</div>

鼠标悬停时显示元素隐藏在mouseleave上

7 个答案: