Question

我真的很感谢我对代码逻辑的帮助。我有一个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>

和css

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

提前致谢

Answer 1

在撰写ID selector函数时，您正在使用hover，因此它仅适用于DOM中的第一个元素。相反，你需要使用class selector并为这样的div提供类名。

$(document).ready(function() {
  $(".test").hover(function() {
    $(this).css("background-color", "yellow");
  }, function() {
    $(this).css("background-color", "white");
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>
<div class="test">Hover the mouse pointer over this</div>

P.S 您的ID在页面中应该是唯一的。

Answer 2

让你的div成为同一个班级，并将它们放在你的悬停中。

＆＃13;

$(document).ready(function () {
        $('.popDiv').hover(
            function () {
                $('#divTable').show();
            },
            function () {
                $('#divTable').hide();
            }
        );
    });

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div id="container">

        <form action="/models/top100.js">
            <div id="divTable" style="display: none" 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 class="popDiv" style="width: 200px; height: 50px; background-color: green">
                        1
                    </div>
                    <div class="popDiv" id="tabDiv" style="width: 200px; height: 50px; background-color: red">2</div>
                    <!--<% } %>-->
                </div>
            </div>

        </form>

    </div>
</div>

＆＃13;

获得悬停功能以显示在所有100个div中

2 个答案: