Javascript 在鼠标悬停时显示/隐藏DIV容器

预期逻辑：

<div class="main-navigation">
 <a href="javascript:void(0);" class="button">Button</a>
</div>

<div class="advantage">
  <div class="content">
    <p>demo content to load <a href="http://www.google.com">test</a></p>
  </div>
</div>

$('.main-navigation .button').on('mouseover', function(){
    $('.advantage).fadeIn(400);
});

$('.main-navigation .button').on('mouseleave', function(){
    $('.advantage).fadeOut(800);
}).find("button, a").on("click", function (e) {
    e.stopPropagation(); 
});

$(".main-navigation .button").mouseover(function(){
 $('.advantage').fadeIn(400);
}); 
$(".main-navigation .button").mouseleave(function(){
    $('.advantage').fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});

将鼠标放在主导航按钮上，显示“advantage”Div容器

如果用户将鼠标移到“advantage”Div容器上，仍然显示该容器并允许用户单击

鼠标离开“按钮”和“优势”容器-隐藏“优势”Div容器

当前行为：

<div class="main-navigation">
 <a href="javascript:void(0);" class="button">Button</a>
</div>

<div class="advantage">
  <div class="content">
    <p>demo content to load <a href="http://www.google.com">test</a></p>
  </div>
</div>

$('.main-navigation .button').on('mouseover', function(){
    $('.advantage).fadeIn(400);
});

$('.main-navigation .button').on('mouseleave', function(){
    $('.advantage).fadeOut(800);
}).find("button, a").on("click", function (e) {
    e.stopPropagation(); 
});

$(".main-navigation .button").mouseover(function(){
 $('.advantage').fadeIn(400);
}); 
$(".main-navigation .button").mouseleave(function(){
    $('.advantage').fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});

将鼠标放在主导航按钮上，显示“advantage”Div容器

如果用户鼠标离开“按钮”，“优势”容器淡出淡入。用户无法单击

不确定，遗漏了哪些逻辑如果用户使用“advantage”容器，则不应隐藏或淡出。

HTML:

<div class="main-navigation">
 <a href="javascript:void(0);" class="button">Button</a>
</div>

<div class="advantage">
  <div class="content">
    <p>demo content to load <a href="http://www.google.com">test</a></p>
  </div>
</div>

$('.main-navigation .button').on('mouseover', function(){
    $('.advantage).fadeIn(400);
});

$('.main-navigation .button').on('mouseleave', function(){
    $('.advantage).fadeOut(800);
}).find("button, a").on("click", function (e) {
    e.stopPropagation(); 
});

$(".main-navigation .button").mouseover(function(){
 $('.advantage').fadeIn(400);
}); 
$(".main-navigation .button").mouseleave(function(){
    $('.advantage').fadeOut(800);
}).find("button, a").on("click", function (e) {
e.stopPropagation();
});

---

主要问题是html按钮样式类缺少双引号（“）

HTML

<div class="main-navigation">
    <a href="javascript:void(0);" class="button">Button</a>
</div>
<div class="advantage">
    <div class="content">
       <p>demo content to load <a href="http://www.google.com">test</a></p>
    </div>
</div>

要加载的演示内容

$（'.main navigation.button'）。打开（'mouseover'，函数（e）{
$（'.advantage'）.fadeIn（）；
$（'.advantage'）。查找（“按钮，a”）。在（“单击”上，函数（e）{
e、 停止传播（）；
})在这里输入代码`
});
$（'.fadebox'）。on（'mouseleave'，function（）{
$（'.advantage'）.fadeOut（）；
})

---

检查此解决方案。它将根据您的要求正常工作。

主要问题是，当鼠标移动到

位置时，鼠标肯定会离开按钮。advantage

因此它将隐藏div（js代码，第2行）。一个更复杂的解决方案可能是在

mouseleave

中检查鼠标是否在

上。addvanatage

在这种情况下防止淡出。主要问题是您试图用javascript解决css问题。请看这里：谢谢。但是，这不是这里的问题。当我键入时，我漏掉了“对于按钮类。