jQuery在悬停时显示/隐藏div

Question

我希望当鼠标悬停在右侧表格的相应行上时显示左div。

我目前将它隐藏起来并显示每个个案-我知道这不是最好的主意，但至少可以奏效。

我想知道如何以一种更简单的方式执行此操作，但不确定如何为这些元素正确使用data-属性。

这是我在不使用data-属性的情况下使它工作的可怕尝试

$("#ldr1").hover(function() {
  $('#lead1').show();
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr2").hover(function() {
  $('#lead2').show();
  $('#lead1').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr3").hover(function() {
  $('#lead3').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr4").hover(function() {
  $('#lead4').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr5").hover(function() {
  $('#lead5').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead3').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr6").hover(function() {
  $('#lead6').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead3').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr7").hover(function() {
  $('#lead7').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead3').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr8").hover(function() {
  $('#lead8').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead3').hide();
  $('#lead9').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr9").hover(function() {
  $('#lead9').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead3').hide();
  $('#lead10').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});
$("#ldr10").hover(function() {
  $('#lead10').show();
  $('#lead1').hide();
  $('#lead2').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead3').hide();
  $('#ldr1').removeClass('highlight');
}, function() {
  $('#lead1').show();
  $('#ldr1').addClass('highlight');
  $('#lead2').hide();
  $('#lead3').hide();
  $('#lead4').hide();
  $('#lead5').hide();
  $('#lead6').hide();
  $('#lead7').hide();
  $('#lead8').hide();
  $('#lead9').hide();
  $('#lead10').hide();
});

.lead_contain {
  width: 100%;
  whitespace: nowrap;
  overflow: auto;
}

.lead_title {
  margin: 15px;
  font-family: 'Yanone Kaffeesatz', 'Work Sans';
  font-size: 48px;
  font-weight: 200;
}

.lead_box {
  display: inline-block;
  margin: 25px;
  width: 425px;
  height: 425px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  overflow: auto;
}

.lead_box a {
  text-decoration: none;
  color: #3366cc;
}

.lead_box a:hover {
  text-decoration: underline;
}

.links_wrapper {
  margin-left: 10px;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  border-bottom: 1px solid #f2f2f2;
}

.links_wrapper:hover {
  color: #999;
  cursor: pointer;
}

.links {
  display: table-cell;
  padding: 10px;
  border-bottom: 4px solid #fff;
}

.links:hover {
  color: #444;
  border-bottom: 4px solid #4FA3E2;
}

.links_highlight {
  display: table-cell;
  padding: 10px;
  color: #444;
  font-weight: bold;
  border-bottom: 4px solid #f2f2f2;
}

.links_highlight:hover {
  border-bottom: 4px solid #4FA3E2;
}

.filters {
  display: block;
  margin-left: 25px;
  margin-bottom: 15px;
  white-space: nowrap;
  font-family: 'Work Sans';
  font-size: 14px;
  font-weight: 300;
}

.stat_div {
  padding: 20px 10px 0px 10px;
  display: inline-block;
  cursor: pointer;
  z-index: 10;
  margin-bottom: 15px;
}

.stat_drop_content {
  min-width: 150px;
  display: none;
  position: absolute;
  text-align: left;
  z-index: 10;
}

.stat_drop,
.stat_drop2,
.stat_drop4,
.stat_drop5,
.stat_drop6 {
  min-width: 100px;
  max-height: 171px;
  overflow-y: scroll;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.stat_drop1,
.stat_drop3,
.stat_drop7,
.stat_drop8 {
  min-width: 100px;
  max-height: 171px;
  overflow-y: scroll;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.stat_type {
  background-color: #fff;
  color: #0090F0;
  border: 1px solid #007aff;
  border-radius: 4px;
  padding: 6px 14px;
  z-index: 10;
}

.stat_div:hover .stat_type {
  background-color: #007aff;
  color: #fff;
}

.stat_div:hover .stat_drop_content {
  display: block;
}

.stat_drop1 ul,
.stat_drop2 ul,
.stat_drop3 ul,
.stat_drop4 ul,
.stat_drop5 ul,
.stat_drop6 ul,
.stat_drop7 ul,
.stat_drop8 ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 6px;
}

.stat_drop1 li,
.stat_drop2 li,
.stat_drop3 li,
.stat_drop4 li,
.stat_drop5 li,
.stat_drop6 li,
.stat_drop7 li,
.stat_drop8 li {
  background-color: #fff;
  color: #444;
  display: block;
  padding: 4px;
  border-radius: 4px;
}

.stat_drop1 li:hover,
.stat_drop2 li:hover,
.stat_drop3 li:hover,
.stat_drop4 li:hover,
.stat_drop5 li:hover,
.stat_drop6 li:hover,
.stat_drop7 li:hover,
.stat_drop8 li:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}

.leaders {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin: 15px auto;
  font-family: 'Work Sans';
  font-weight: 300;
}

.lead_image {
  position: absolute;
  top: 0;
  left: 55;
  border: 1px solid #c0c0c0;
  border-radius: 50%;
  width: 90px;
  height: 90px;
}

.lead_image_team {
  position: absolute;
  top: 65;
  left: 130;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  z-index: 5;
  background-color: #f6f6f6;
}

.lead_number {
  position: absolute;
  width: 50px;
  top: 100;
  left: 30;
  text-align: right;
  padding-right: 5px;
  font-size: 24px;
  color: #444;
  border-right: 1px solid #444;
}

.lead_name {
  position: absolute;
  width: 130px;
  top: 100;
  left: 85;
  padding-left: 5px;
  font-size: 16px;
  line-height: 90%;
  color: #444;
  overflow: hidden;
}

.lead_team {
  position: absolute;
  top: 135;
  left: 5;
  width: 135px;
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
  color: #444;
  border-right: 1px solid #444;
}

.lead_pos {
  position: absolute;
  top: 135;
  left: 150;
  width: 30px;
  padding-left: 10px;
  font-size: 12px;
  color: #444;
}

.lead_stats {
  position: absolute;
  top: 195;
  left: 0;
  width: 215px;
  text-align: center;
}

.lead_stats span:first-child {
  font-size: 11px;
  font-weight: 500;
  color: #000;
}

.lead_stats span:last-child {
  font-size: 52px;
  color: #444;
}

.lead_table {
  position: absolute;
  top: 0;
  left: 215;
  width: 170px;
}

.lead_table table {
  width: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.lead_table tr td {
  font-size: 13px;
  font-weight: 300;
  padding: 0px 0px 10px 0px;
}

.highlight td {
  font-weight: 500 !important;
}

.lead_table table td:first-child {
  text-align: left;
}

.lead_table table td:nth-child(2) {
  text-align: right;
}

.lead_table table tr:last-child td {
  font-size: 16px;
  text-align: right;
  cursor: pointer;
}

.lead_table tr:hover td {
  font-weight: 500;
}

.lead_table tr:nth-child(n+1):hover tr:first-child td {
  font-weight: 300 !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="lead_contain">

  <div class="lead_box">
    <div class='lead_title'>Skaters</div>
    <div class="links_wrapper">
      <div class="links_highlight" id="points1">POINTS</div>
      <div class="links" id="goals1">GOALS</div>
      <div class="links" id="assists1">ASSISTS</div>
    </div>

    <div class="leaders" id="stat1">
      <div class="lead_inner" id="lead1">
        <div class="lead_image" style="background: url('players/Mario_Lemieux_5_10_1965.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/PIT.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#66</div>
        <div class="lead_name">Mario<br>Lemieux</div>
        <div class="lead_team">Pittsburgh Penguins</div>
        <div class="lead_pos">C</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>199</span>
        </div>
      </div>
      <div class="lead_inner" id="lead2" style="display:none;">
        <div class="lead_image" style="background: url('players/Wayne_Gretzky_26_1_1961.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/LAK.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#99</div>
        <div class="lead_name">Wayne<br>Gretzky</div>
        <div class="lead_team">Los Angeles Kings</div>
        <div class="lead_pos">C</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>168</span>
        </div>
      </div>
      <div class="lead_inner" id="lead3" style="display:none;">
        <div class="lead_image" style="background: url('players/Steve_Yzerman_9_5_1965.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/DET.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#19</div>
        <div class="lead_name">Steve<br>Yzerman</div>
        <div class="lead_team">Detroit Red Wings</div>
        <div class="lead_pos">C</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>155</span>
        </div>
      </div>
      <div class="lead_inner" id="lead4" style="display:none;">
        <div class="lead_image" style="background: url('players/Bernie_Nicholls_24_6_1961.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/LAK.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#9</div>
        <div class="lead_name">Bernie<br>Nicholls</div>
        <div class="lead_team">Los Angeles Kings</div>
        <div class="lead_pos">C</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>150</span>
        </div>
      </div>
      <div class="lead_inner" id="lead5" style="display:none;">
        <div class="lead_image" style="background: url('') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/PIT.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#4</div>
        <div class="lead_name">Rob<br>Brown</div>
        <div class="lead_team">Pittsburgh Penguins</div>
        <div class="lead_pos">RW</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>115</span>
        </div>
      </div>
      <div class="lead_inner" id="lead6" style="display:none;">
        <div class="lead_image" style="background: url('players/Paul_Coffey_1_6_1961.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/PIT.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#77</div>
        <div class="lead_name">Paul<br>Coffey</div>
        <div class="lead_team">Pittsburgh Penguins</div>
        <div class="lead_pos">D</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>113</span>
        </div>
      </div>
      <div class="lead_inner" id="lead7" style="display:none;">
        <div class="lead_image" style="background: url('') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/CGY.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#7</div>
        <div class="lead_name">Joe<br>Mullen</div>
        <div class="lead_team">Calgary Flames</div>
        <div class="lead_pos">RW</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>110</span>
        </div>
      </div>
      <div class="lead_inner" id="lead8" style="display:none;">
        <div class="lead_image" style="background: url('') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/EDM.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#17</div>
        <div class="lead_name">Jari<br>Kurri</div>
        <div class="lead_team">Edmonton Oilers</div>
        <div class="lead_pos">RW</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>102</span>
        </div>
      </div>
      <div class="lead_inner" id="lead9" style="display:none;">
        <div class="lead_image" style="background: url('players/Jimmy_Carson_20_7_1968.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/EDM.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#10</div>
        <div class="lead_name">Jimmy<br>Carson</div>
        <div class="lead_team">Edmonton Oilers</div>
        <div class="lead_pos">C</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>100</span>
        </div>
      </div>
      <div class="lead_inner" id="lead10" style="display:none;">
        <div class="lead_image" style="background: url('players/Luc_Robitaille_17_2_1966.png') no-repeat center;background-size:99px 90px;"></div>
        <div class="lead_image_team" style="background: #f6f6f6 url('logos/LAK.png') no-repeat center;background-size:32px 32px;"></div>
        <div class="lead_number">#20</div>
        <div class="lead_name">Luc<br>Robitaille</div>
        <div class="lead_team">Los Angeles Kings</div>
        <div class="lead_pos">LW</div>
        <div class="lead_stats">
          <span>POINTS</span><br>
          <span>98</span>
        </div>
      </div>
      <div class="lead_table">
        <table>
          <tr class="highlight" id="ldr1">
            <td>Mario Lemieux</td>
            <td>199</td>
          </tr>
          <tr id="ldr2">
            <td>Wayne Gretzky</td>
            <td>168</td>
          </tr>
          <tr id="ldr3">
            <td>Steve Yzerman</td>
            <td>155</td>
          </tr>
          <tr id="ldr4">
            <td>Bernie Nicholls</td>
            <td>150</td>
          </tr>
          <tr id="ldr5">
            <td>Rob Brown</td>
            <td>115</td>
          </tr>
          <tr id="ldr6">
            <td>Paul Coffey</td>
            <td>113</td>
          </tr>
          <tr id="ldr7">
            <td>Joe Mullen</td>
            <td>110</td>
          </tr>
          <tr id="ldr8">
            <td>Jari Kurri</td>
            <td>102</td>
          </tr>
          <tr id="ldr9">
            <td>Jimmy Carson</td>
            <td>100</td>
          </tr>
          <tr id="ldr10">
            <td>Luc Robitaille</td>
            <td>98</td>
          </tr>
          <tr>
            <td colspan="2">All Leaders</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>

<div class="lead_box">

</div>

</div>

Answer 1

即使不使用data-，您也可以大大减少代码：

$('table tr').hover(function(){
  const id = +this.id.replace('ldr', '')
  $('.lead_inner').hide();
  $('#lead'+id).show();
  if (id > 1) $('#ldr1').removeClass('highlight');
}, function() {
  $('.lead_inner').hide();
  $('#lead1').show();
  if (!$('#ldr1').hasClass('highlight')) $('#ldr1').addClass('highlight');
}) 

Answer 2

此答案的作用是使用div属性将每个表行与包含要显示的额外信息的data-lead关联，该属性包含关联的div的ID

它还会向所有行添加一个类（lead），以便更轻松地将它们定位为一个组。我本来也可以很容易地使用类似$('.lead_table tr')之类的东西，但是我想很具体。

我注意到您要隐藏/显示的所有元素都具有类lead_inner，因此我习惯了先隐藏所有元素，然后显示具有适当ID（从{{1} }属性值。

我不确定我是否正确切换了data-lead类，因此随时可以根据需要进行编辑。

使用highlight属性的优点是您不必在左右之间保持ID同步；只要data-属性指向正确的ID，就可以将它们命名为任意名称。

data-

$('.lead').hover(function () {
  var $this = $(this);
  $('.lead_inner').hide();
  $('.lead').removeClass('highlight');
  $('#' + $this.data('lead')).show();
  $this.addClass('highlight');
}, function () {
  $('.lead_inner').hide();
  $(this).removeClass('highlight');
});

.lead_contain {
  width: 100%;
  whitespace: nowrap;
  overflow: auto;
}

.lead_title {
  margin: 15px;
  font-family: 'Yanone Kaffeesatz', 'Work Sans';
  font-size: 48px;
  font-weight: 200;
}

.lead_box {
  display: inline-block;
  margin: 25px;
  width: 425px;
  height: 425px;
  font-family: 'Open Sans', sans-serif;
  font-size: 13px;
  overflow: auto;
}

.lead_box a {
  text-decoration: none;
  color: #3366cc;
}

.lead_box a:hover {
  text-decoration: underline;
}

.links_wrapper {
  margin-left: 10px;
  color: #444;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  border-bottom: 1px solid #f2f2f2;
}

.links_wrapper:hover {
  color: #999;
  cursor: pointer;
}

.links {
  display: table-cell;
  padding: 10px;
  border-bottom: 4px solid #fff;
}

.links:hover {
  color: #444;
  border-bottom: 4px solid #4FA3E2;
}

.links_highlight {
  display: table-cell;
  padding: 10px;
  color: #444;
  font-weight: bold;
  border-bottom: 4px solid #f2f2f2;
}

.links_highlight:hover {
  border-bottom: 4px solid #4FA3E2;
}

.filters {
  display: block;
  margin-left: 25px;
  margin-bottom: 15px;
  white-space: nowrap;
  font-family: 'Work Sans';
  font-size: 14px;
  font-weight: 300;
}

.stat_div {
  padding: 20px 10px 0px 10px;
  display: inline-block;
  cursor: pointer;
  z-index: 10;
  margin-bottom: 15px;
}

.stat_drop_content {
  min-width: 150px;
  display: none;
  position: absolute;
  text-align: left;
  z-index: 10;
}

.stat_drop,
.stat_drop2,
.stat_drop4,
.stat_drop5,
.stat_drop6 {
  min-width: 100px;
  max-height: 171px;
  overflow-y: scroll;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.stat_drop1,
.stat_drop3,
.stat_drop7,
.stat_drop8 {
  min-width: 100px;
  max-height: 171px;
  overflow-y: scroll;
  display: inline-block;
  vertical-align: top;
  text-align: left;
  background-color: #fff;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.stat_type {
  background-color: #fff;
  color: #0090F0;
  border: 1px solid #007aff;
  border-radius: 4px;
  padding: 6px 14px;
  z-index: 10;
}

.stat_div:hover .stat_type {
  background-color: #007aff;
  color: #fff;
}

.stat_div:hover .stat_drop_content {
  display: block;
}

.stat_drop1 ul,
.stat_drop2 ul,
.stat_drop3 ul,
.stat_drop4 ul,
.stat_drop5 ul,
.stat_drop6 ul,
.stat_drop7 ul,
.stat_drop8 ul {
  margin-top: 0;
  margin-bottom: 0;
  padding: 6px;
}

.stat_drop1 li,
.stat_drop2 li,
.stat_drop3 li,
.stat_drop4 li,
.stat_drop5 li,
.stat_drop6 li,
.stat_drop7 li,
.stat_drop8 li {
  background-color: #fff;
  color: #444;
  display: block;
  padding: 4px;
  border-radius: 4px;
}

.stat_drop1 li:hover,
.stat_drop2 li:hover,
.stat_drop3 li:hover,
.stat_drop4 li:hover,
.stat_drop5 li:hover,
.stat_drop6 li:hover,
.stat_drop7 li:hover,
.stat_drop8 li:hover {
  background-color: #f6f6f6;
  cursor: pointer;
}

.leaders {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  margin: 15px auto;
  font-family: 'Work Sans';
  font-weight: 300;
}

.lead_image {
  position: absolute;
  top: 0;
  left: 55;
  border: 1px solid #c0c0c0;
  border-radius: 50%;
  width: 90px;
  height: 90px;
}

.lead_image_team {
  position: absolute;
  top: 65;
  left: 130;
  border: 1px solid #eee;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  z-index: 5;
  background-color: #f6f6f6;
}

.lead_number {
  position: absolute;
  width: 50px;
  top: 100;
  left: 30;
  text-align: right;
  padding-right: 5px;
  font-size: 24px;
  color: #444;
  border-right: 1px solid #444;
}

.lead_name {
  position: absolute;
  width: 130px;
  top: 100;
  left: 85;
  padding-left: 5px;
  font-size: 16px;
  line-height: 90%;
  color: #444;
  overflow: hidden;
}

.lead_team {
  position: absolute;
  top: 135;
  left: 5;
  width: 135px;
  font-size: 12px;
  text-align: right;
  padding-right: 10px;
  color: #444;
  border-right: 1px solid #444;
}

.lead_pos {
  position: absolute;
  top: 135;
  left: 150;
  width: 30px;
  padding-left: 10px;
  font-size: 12px;
  color: #444;
}

.lead_stats {
  position: absolute;
  top: 195;
  left: 0;
  width: 215px;
  text-align: center;
}

.lead_stats span:first-child {
  font-size: 11px;
  font-weight: 500;
  color: #000;
}

.lead_stats span:last-child {
  font-size: 52px;
  color: #444;
}

.lead_table {
  position: absolute;
  top: 0;
  left: 215;
  width: 170px;
}

.lead_table table {
  width: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
}

.lead_table tr td {
  font-size: 13px;
  font-weight: 300;
  padding: 0px 0px 10px 0px;
}

.highlight td {
  font-weight: 500 !important;
}

.lead_table table td:first-child {
  text-align: left;
}

.lead_table table td:nth-child(2) {
  text-align: right;
}

.lead_table table tr:last-child td {
  font-size: 16px;
  text-align: right;
  cursor: pointer;
}

.lead_table tr:hover td {
  font-weight: 500;
}

.lead_table tr:nth-child(n+1):hover tr:first-child td {
  font-weight: 300 !important;
}