Javascript 在鼠标上显示元素在鼠标上隐藏

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

我的问题是，当我在绿色、黄色和紫色上方盘旋时#登录名仍然保持可见，这是不需要的

<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>

$（'#四'）.mouseover（函数（）{
$（'#login'）.show（）；
});
$（“#按钮”）.mouseleave（函数（）{
$（'#login'）.hide（）；
});

---

使用如下结构：

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

---

只有通过添加以下行，才能使用CSS实现这一点：

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

---

#按钮{
宽度：160px；
背景：蓝色；
}
#一个{
浮动：左；
宽度：40px；
高度：40px；
背景：绿色；
}
#两个{
浮动：左；
宽度：40px；
高度：40px；
背景：黄色；
}
#三{
浮动：左；
宽度：40px；
高度：40px；
背景：紫色；
}
#四{
浮动：左；
宽度：40px；
高度：40px；
背景：粉红色；
}
#登录{
高度：100px；
背景：橙色；
显示：无；
}
#登录：悬停，
#四：悬停~#登录{display:block}

---

这就是您所需要的：

$（'.toggle'）.mouseover（函数（）{
$（'#login'）.show（）；
});
$（'.toggle'）.mouseleave（函数（）{
$（'#login'）.hide（）；
});

请参阅上的更新代码

---

您也可以这样尝试：

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

});

---

你可以使用像这样的计时器

jQuery（函数（$）{
var$target=$（'#login'）；
$（'#四'）。悬停（函数（）{
clearTimeout（$target.data（'hoverTimer'））；
$target.stop（真，真），slideDown（500）；
}，函数（）{
var timer=setTimeout（函数（）{
$target.stop（true，true.slideUp（）；
}, 200);
$target.data（'hoverTimer'，timer）；
});
$target.hover（函数（）{
clearTimeout（$（this.data（'hoverTimer'））；
}，函数（）{
$（this.stop（true，true）.slideUp（）；
});
});
#按钮{
宽度：160px；
背景：蓝色；
}
#一个{
浮动：左；
宽度：40px；
高度：40px；
背景：绿色；
}
#两个{
浮动：左；
宽度：40px；
高度：40px；
背景：黄色；
}
#三{
浮动：左；
宽度：40px；
高度：40px；
背景：紫色；
}
#四{
浮动：左；
宽度：40px；
高度：40px；
背景：粉红色；
}
#登录{
高度：100px；
背景：橙色；
显示：无；
}
您可以使用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>


#标志{
显示：无
}
#粉红色：悬停+#徽标，#徽标：悬停{
显示：块；
}
粉红色
标志
你的提琴可以用了，伙计，我已经检查过在你的提琴中添加jquery。哇，我真不敢相信我竟然忘记了。叹息漫长的一天。非常感谢。
$('#four,#login').mouseover(function () {
    $('#login').show();
}).mouseleave(function(){
   $('#login').hide();
});

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

});

<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>