主页 / 问题 / 1085368
Accepted
JuniorDjango
Asked:2020-02-21 01:18:09 +0000 UTC2020-02-21 01:18:09 +0000 UTC

悬停在图标上时如何显示隐藏的文本？

  • 772

请帮忙，有几个图标，当你将鼠标悬停在它们上面时，文本应该出现在下面并被固定，但是如果我将光标悬停在其他图标上，旧条目会消失并出现一个新条目。

这是一个很好的例子 https://netology.ru/programs/web-developer#/resume

完全像这样工作，我只得到一堆线

javascript

2 个回答

  1. Best Answer

            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>

    • 2 

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

    • 1

相关问题