Javascript 在所有100个div中显示一个悬停函数_Javascript_Jquery_Html_Css

Javascript 在所有100个div中显示一个悬停函数

javascript jquery html css

Javascript 在所有100个div中显示一个悬停函数,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我真的非常感谢您对我的代码逻辑的帮助。我有一个100个div的循环，我希望当我把鼠标放在任何一个div上时，它会显示一个弹出窗口（我只需要做一些调整）问题是，当鼠标悬停在上时，我似乎无法使弹出窗口在所有div上都工作…只有第一个有效请帮我看看我做错了什么。多谢各位下面是我的代码 <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <link hr

我真的非常感谢您对我的代码逻辑的帮助。我有一个100个div的循环，我希望当我把鼠标放在任何一个div上时，它会显示一个弹出窗口（我只需要做一些调整）

问题是，当鼠标悬停在上时，我似乎无法使弹出窗口在所有div上都工作…只有第一个有效

请帮我看看我做错了什么。多谢各位

下面是我的代码

<!DOCTYPE html>
<html>
<head>
<title>TODO supply a title</title>
<link href="/css/index.css" rel="Stylesheet"/>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>

   <script type='text/javascript'>
     $(document).ready(function() {
     $('#popDiv').hover(
     function() { $('#divTable').show(); },
     function() { $('#divTable').hide(); }
      );
      });
   </script>

  </head>
  <body >
   <div id="wrapper">
   <div id="container">

       <form action="/models/top100.js">
         <div id="divTable" class="tooltip" href="#">
             <table id= "tbDetails" class="popup" >
              <tbody><tr>
                 <td class="col1"></td>
                 <td class="col2"></td>
                 <td class="col3"></td>
                 <td class="col4"></td>
              </tr> </tbody>
              </table>
          </div>
          <div  id="bodydiv"> <div id="leftdiv" > 
             <% for (var i = 0; i < 100; i++) { %>
               <div id="popDiv">

                </div>
                   <div id="tabDiv"></div>
            <% } %>
           </div>
           </div>

           </form>

</div>
</div> 
</body>
</html>

提前感谢

在编写

悬停

函数时，您正在使用

ID选择器

，因此这将仅适用于

DOM中的第一个元素

。相反，您需要使用

类选择器

，并像这样为div指定类名

$（文档）.ready（函数（）{
$（“.test”）.hover（函数（）{
$（this.css（“背景色”、“黄色”）；
}，函数（）{
$（this.css（“背景色”、“白色”）；
});
});

将鼠标指针悬停在此位置上
将鼠标指针悬停在此位置上
在编写Hover
函数时，将鼠标指针悬停在此
上，您正在使用ID选择器
，这样它只对DOM中的第一个元素有效。相反，您需要使用类选择器
，并像这样为div指定类名

$（文档）.ready（函数（）{
$（“.test”）.hover（函数（）{
$（this.css（“背景色”、“黄色”）；
}，函数（）{
$（this.css（“背景色”、“白色”）；
});
});

将鼠标指针悬停在此位置上
将鼠标指针悬停在此位置上
将鼠标指针悬停在此
上，为您的div指定相同的类，并在悬停时使用它

$（文档）.ready（函数（）{
$（'.popDiv'）。悬停(
函数（）{
$（'#divTable'）.show（）；
},
函数（）{
$（'#divTable'）.hide（）；
}
);
});
.popup{
宽度：135px；
高度：50px；
文本对齐：居中；
背景颜色：黄色；
显示：内联块；
垂直对齐：中间对齐；
右边距：50px；
线高：50%；
}
#包装纸{
保证金：自动；
}
#容器{
位置：绝对位置；
保证金：0px自动；
}
#bodydiv{
保证金：0自动；
填充：0px；
}
#左撇子{
边际上限：30vh；
左边距：15vh；
宽度：90vh；
高度：75vh；
浮动：左；
}
#爆米花{
显示：内联块；
边框宽度：2倍；
边框样式：实心；
边框颜色：rgb（236,80,184）；
背景色：rgb（236,80,184）；
左边距：10vh；
宽度：5vh；
高度：20vh；
}
#塔布迪夫{
宽度：70vh；
高度：20vh；
显示：内联块；
边框宽度：2倍；
边框样式：实心；
背景色：rgb（17980236）；
边框颜色：rgb（122204241）；
}

1.
2.
将您的div设置为相同的类，并在悬停时使用它

$（文档）.ready（函数（）{
$（'.popDiv'）。悬停(
函数（）{
$（'#divTable'）.show（）；
},
函数（）{
$（'#divTable'）.hide（）；
}
);
});
.popup{
宽度：135px；
高度：50px；
文本对齐：居中；
背景颜色：黄色；
显示：内联块；
垂直对齐：中间对齐；
右边距：50px；
线高：50%；
}
#包装纸{
保证金：自动；
}
#容器{
位置：绝对位置；
保证金：0px自动；
}
#bodydiv{
保证金：0自动；
填充：0px；
}
#左撇子{
边际上限：30vh；
左边距：15vh；
宽度：90vh；
高度：75vh；
浮动：左；
}
#爆米花{
显示：内联块；
边框宽度：2倍；
边框样式：实心；
边框颜色：rgb（236,80,184）；
背景色：rgb（236,80,184）；
左边距：10vh；
宽度：5vh；
高度：20vh；
}
#塔布迪夫{
宽度：70vh；
高度：20vh；
显示：内联块；
边框宽度：2倍；
边框样式：实心；
背景色：rgb（17980236）；
边框颜色：rgb（122204241）；
}

1.
2.
重复“popDiv”和“tabDiv”ID时可能会出现重复。到目前为止，您已经得到了一些很好的答案，但您的设计总体上是有缺陷的。不要将同一事件处理程序附加到容器中的几十个或数百个元素，而只将其附加到cont
a.tooltip {outline:none; }
a.tooltip strong {line-height:20px;}
a.tooltip:hover {text-decoration:none;} 
.tooltip  {
 z-index:10;display:none; margin-right:50px;

 width:135px; line-height:16px;
 position:absolute; color:#111;
 border:1px solid #D2D2D2; background:#ffffff;
}
.tooltip.show { display: inline-block; }

.callout {z-index:20;position:absolute;top:30px;border:0;left:-12px;}

.popup
{
  width:135px;
  height:50px;
  text-align:  center;
  background-color: yellow;
  display: inline-block;
  vertical-align: middle;
  margin-right: 50px;
  line-height:  50%;

 }
 #wrapper
 {
    margin: auto;
 }

 #container
 {
   position:absolute;
   margin:0px auto;
  }
  #bodydiv
  {
    margin:0 auto;
    padding:0px;
  }

  #leftdiv
  {
    margin-top:30vh;
    margin-left:15vh;
    width:90vh;
    height:75vh;
    float:left;
  }

  #popDiv
  {

     display:inline-block;
     border-width: 2px;
     border-style: solid;
     border-color: rgb(236, 80, 184);
     background-color: rgb(236, 80, 184);
     margin-left:10vh;
     width:5vh;
     height:20vh;
    }
    #tabDiv
    {

     width:70vh;
     height:20vh;
     display:inline-block;
     border-width: 2px;
     border-style: solid;
     background-color: rgb(179, 80, 236);
     border-color: rgb(122, 204, 241);
    }