CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Usman Khan
Usman Khan

Reputation: 179

On mouse over show div not working properly

I have a table on every table when I move my mouse to show a pop up will appear the thing is when I move my mouse on the first one it shows me all, would there be a possibility to show only the one on which mouse is hovered over? as of I want to when the user hover's it shows the pop up of the one which the mouse is hovering over, not all the pop up should be shown as of now 

$(document).ready(function() {
  $('.fa-bar-chart').mouseover(function() {
    $(".bar_graph").show();
  });

  $('.fa-bar-chart').mouseout(function() {
    $(".bar_graph").hide();
  });
});
table {
  margin-top:80px;
}
i {
  position: relative;
}
.bar_graph {
    width: 200px;
    height: 200px;
    background-color: #efefef;
    position: absolute;
    top: 0;
    right: -200px;
    padding: 0;
    padding-right: 10px;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true">Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
  <tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true">Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
  <tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true"> Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
<tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true">Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
 </table>

Upvotes: 2

Views: 73

Answers (1)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The $(".bar_graph") selector will return all the elements with the class bar_graph, You should use this to refer to the related bar_graph like :

$(".bar_graph",this).show();
//Or
$(this).find(".bar_graph").show();

Hope this helps.

$(document).ready(function() {
  $('.fa-bar-chart').mouseover(function() {
    $(".bar_graph", this).show();
  });

  $('.fa-bar-chart').mouseout(function() {
    $(".bar_graph", this).hide();
  });
});
table {
  margin-top:80px;
}
i {
  position: relative;
}
.bar_graph {
    width: 200px;
    height: 200px;
    background-color: #efefef;
    position: absolute;
    top: 0;
    right: -200px;
    padding: 0;
    padding-right: 10px;
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
<tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true">Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
  <tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true">Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
  <tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true"> Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
<tr>                             
  <td>Stock In Trade <i class="fa fa-bar-chart" aria-hidden="true">Show
    <div class="bar_graph">
      <div class="bars">
      <span class="line_gr"></span>
      <p>2016</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2015</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2014</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2013</p>
      </div>
      <div class="bars">
      <span class="line_gr"></span>
      <p>2012</p>
      </div>
    </div>
    </i>
  </td>       
  </tr>
 </table>

Upvotes: 3

Related Questions