jQuery показать / скрыть div при наведении - PullRequest
Новая
       0

jQuery показать / скрыть div при наведении

0 голосов
/ 26 мая 2020

Я хочу, чтобы левый 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>

Ответы [ 2 ]

1 голос
/ 26 мая 2020

Этот ответ связывает каждую строку таблицы с div, который содержит дополнительную информацию, которую вы хотите показать, используя атрибут data-lead, который содержит идентификатор связанного div.

Он также добавляет класс (lead) ко всем строкам, чтобы было легче нацелить их как группу. Я мог бы легко использовать что-то вроде $('.lead_table tr'), но мне нравится указывать c.

Я заметил, что все элементы, которые вы хотите скрыть / показать, имеют класс lead_inner, поэтому я использовал чтобы сначала скрыть их все, а затем показать тот, у кого соответствующий идентификатор (из значения атрибута data-lead.

Я не уверен, что правильно переключил класс highlight, так что не стесняйтесь отредактируйте по мере необходимости.

Преимущество использования атрибута data- состоит в том, что вам не нужно синхронизировать свои идентификаторы c между правым и левым; пока атрибут 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;
}
<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" style="display:none;">
        <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="lead highlight" id="ldr1" data-lead="lead1">
            <td>Mario Lemieux</td>
            <td>199</td>
          </tr>
          <tr id="ldr2" class="lead" data-lead="lead2">
            <td>Wayne Gretzky</td>
            <td>168</td>
          </tr>
          <tr id="ldr3" class="lead" data-lead="lead3">
            <td>Steve Yzerman</td>
            <td>155</td>
          </tr>
          <tr id="ldr4" class="lead" data-lead="lead4">
            <td>Bernie Nicholls</td>
            <td>150</td>
          </tr>
          <tr id="ldr5" class="lead" data-lead="lead5">
            <td>Rob Brown</td>
            <td>115</td>
          </tr>
          <tr id="ldr6" class="lead" data-lead="lead6">
            <td>Paul Coffey</td>
            <td>113</td>
          </tr>
          <tr id="ldr7" class="lead" data-lead="lead7">
            <td>Joe Mullen</td>
            <td>110</td>
          </tr>
          <tr id="ldr8" class="lead" data-lead="lead8">
            <td>Jari Kurri</td>
            <td>102</td>
          </tr>
          <tr id="ldr9" class="lead" data-lead="lead9">
            <td>Jimmy Carson</td>
            <td>100</td>
          </tr>
          <tr id="ldr10" class="lead" data-lead="lead10">
            <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>
1 голос
/ 26 мая 2020

Вы можете значительно сократить код, даже не используя 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');
})
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...