鼠标悬停显示div无法正常工作

时间：2017-08-04 09:23:27

标签： javascript jquery html css

当我移动鼠标以显示弹出窗口时，我会在每张桌子上都有一个表格，当我将鼠标移动到第一个显示弹出窗口时，就会出现这样的情况，是否有可能只显示一个哪只老鼠盘旋？我希望当用户将鼠标悬停在显示弹出鼠标悬停的弹出窗口时，并不是所有弹出窗口都应显示为现在

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

  $('.fa-bar-chart').mouseout(function() {
    $(".bar_graph").hide();
  });
});
＆＃13; 
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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：3)

$(".bar_graph")选择器将返回类bar_graph的所有元素，您应该使用this来引用相关的bar_graph，如：

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

希望这有帮助。

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

相关问题
最新问题