Как при наведении на иконки показывать скрытый текст?

Question

Прошу помочь, есть несколько иконок, при наведении на них, внизу должны появляться тексты и зафиксироваться, но если я курсором на другие иконки навожу, чтобы старая запись исчезла, и появилась новая.

Вот наглядный пример https://netology.ru/programs/web-developer#/resume

чтобы точно так работала, у меня просто куча строк получается

Answer 1

$(document).ready(function() {

  $('ul.tabs li').hover(function() {
    var tab_id = $(this).attr('data-tab');

    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  })

})

ul.tabs {
  margin: 0px;
  padding: 0px;
  list-style: none;
}

ul.tabs li {
  background: none;
  color: black;
  display: inline-block;
  padding: 10px 30px;
  border-radius: 30px;
  cursor: pointer;
}

ul.tabs li.current {
  background: crimson;
  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.5);
  color: white;
  cursor: default;
}

.tab-content {
  display: none;
  padding: 15px;
}

.tab-content.current {
  display: inherit;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1">Иконка 1</li>
    <li class="tab-link" data-tab="tab-2">Иконка 2</li>
    <li class="tab-link" data-tab="tab-3">Иконка 3</li>
    <li class="tab-link" data-tab="tab-4">Иконка 4</li>
  </ul>
  <div id="tab-1" class="tab-content current">
    Текст 1
  </div>
  <div id="tab-2" class="tab-content">
    Текст 2
  </div>
  <div id="tab-3" class="tab-content">
    Текст 3
  </div>
  <div id="tab-4" class="tab-content">
    Текст 4
  </div>
</div>

Answer 2

        var elems = document.getElementsByClassName('immg');
        var divs = document.getElementsByClassName('divv');
        for(let z=0;z<divs.length;z++){
            divs[z].style.display = "none";
        }
        for(let i=0;i<elems.length;i++){
            elems[i].onmouseover = function (c) {
                for(let z=0;z<divs.length;z++){
                    divs[z].style.display = "none";
                }
                divs[i].style.display = "block";
            }
        }

<div>
<img class="immg" src="https://netology.ru/backend/uploads/page_assets/images/file/50/html.svg">
<img class="immg" src="https://netology.ru/backend/uploads/page_assets/images/file/51/css.svg">
<img class="immg" src="https://netology.ru/backend/uploads/page_assets/images/file/52/js.svg">
<img class="immg" src="https://netology.ru/backend/uploads/page_assets/images/file/53/canvas-1.svg">
</div>
<div class="divv">Описание картинки 1</div>
<div class="divv">Описание картинки 2</div>
<div class="divv">Описание картинки 3</div>
<div class="divv">Описание картинки 4</div>

БЛОГ НА HUSL

Как при наведении на иконки показывать скрытый текст?

Ответы (2 шт):