在mouseover上显示元素在mouseleave上隐藏

Show element on mouseover hide on mouseleave

本文关键字：隐藏 mouseleave 显示 mouseover 元素      更新时间：2023-12-18

我在使用此功能时遇到问题。我希望#login在鼠标悬停在#pink上后显示，并在悬停在#login上时保持可见，但在悬停在#绿色、#黄色、#紫色或#按钮容器外时消失。

我的问题是，当我悬停在#绿色、#黄色和#紫色#登录仍然可见，这是不希望的。

<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

只有通过添加以下行，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>

使用这样的结构：

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

请参阅jsfiddle 上的更新代码

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

您也可以这样尝试：Demo

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

您可以使用类似的计时器

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();
  });
});
#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;
}
<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>

您可以使用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>

这就是您所需要的：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();
});
相关文章：