get a hover function to appear in all 100 divs

Question

I would really aprreciate help on my code logic. I have a loop of 100 divs and i want that when i a mouse overs on any one of the div it should display a popup(i have gotten just little adjustments left to make).

the problem is i can't seem to make the popup work on all divs when hovered on...only the first one works..

Please help show me what i am doing wrong. thank you

below is my code

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

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

thanks in advance

Possible duplicate of [Does ID have to be unique in the whole page?](https://stackoverflow.com/questions/9454645/does-id-have-to-be-unique-in-the-whole-page) — Taplar, Dec 22 '17 at 17:40
You've gotten a couple of good answers so far, but your design in general is flawed. Do *not* attach the same event handler to dozens or hundreds of elements inside a container, but attach it only to the container, then check the target of the event and take appropriate action. — Dexygen, Dec 22 '17 at 18:02

score 3 · Accepted Answer · answered Dec 22 '17 at 17:40

You are using ID selector when writing hover function so that'll work only for the first element in the DOM. Instead you need to use class selector and give class name to divs like this.

$(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 Your id should be unique within the page.

Thank you so much for that clarification @Sanchit its working now — Kelly Blue, Dec 22 '17 at 18:03

score 1 · Answer 2 · answered Dec 22 '17 at 17:52

Give your divs the same class, and us it in your hover.

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

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

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

get a hover function to appear in all 100 divs

2 Answers2