javascript - Div 悬停无法正常工作

<分区>

当我将 div(一)悬停时，div(二)弹出，但是当我将鼠标悬停在弹出的 div 上时，我的 div 出现问题，他消失了，我需要在 div(一)之前滑动或弹出 div(二) ) 不在之后。 div(一)和div(二)属于同一个类。这是我的 CSS、HTML 和 javascript。

HTML

 <div id = "one" class="slideUP1"></div>
 <div id = "two" class="slideUP1"></div>

CSS

 .slideUP1

{
      background-color:Gray;
}

#one


{
    z-index:50;
    width:320px;
    height:124px;
    position:relative;
    overflow:hidden;
    float:left;
    margin-right:5px;
    margin-top:0px;
}

#two 
{ 
  display: none; 
  position:absolute;
  height:300px;
  width:900px; 
  z-index:55; 
  margin-bottom:0px;
}

JavaScript

$(document).ready(function () {

           $(".slideUP1").hover(function () {
               $(this).next("#two").animate({ opacity: "show", top: "144" }, "fast");
           });
       });

       $(document).ready(function () {

           $(".slideUP1").mouseleave(function () {
               $(this).next("#two").animate({ opacity: "hide", top: "154" }, "fast");
           });
       });

最佳答案

问题是，当您将鼠标悬停在第二个 div 上时，您会离开第一个 div，从而使其关闭。将它们都放在一个容器中，并改为在其上使用悬停事件。

<div id = "container">
    <div id = "one" class="slideUP1"></div>
    <div id = "two" class="slideUP1"></div>
</div>

和 javascript:

$(document).ready(function () {

       $("#container").hover(
            function () {
               $(this).find("#two").animate({ opacity: "show", top: "144" }, "fast");
           },
            function () {
               $(this).find("#two").animate({ opacity: "hide", top: "154" }, "fast");
           });
   });

关于javascript - Div 悬停无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12691592/

上一篇：CSS:如何使段落中的连续行越过具有高度的左浮动图像

下一篇：css - 如何根据值对列进行不同的着色

相关文章：

javascript - 来自 Web API 的空白请求、状态和错误

javascript - css javascript 样式表已禁用？

javascript - 全日历.io : how to display one event per line in agendaWeek then mix all in one?

jquery - 网站内容被截断和布局问题

jquery - 使用 HTML、CSS 或 jQuery 绘制一个圆(带扇形)

javascript - 为什么我的应用程序中的路由不起作用？

javascript - 尝试以编程方式创建多维数组

javascript - 使用 jQuery 打印 iFrame

javascript - 背景上的文本(Canvas/JS)

javascript - 克隆包含 currentTarget 的 KeyboardEvent 事件