Появление блока при наведении на другой блок javascript

205

17 ноября 2020, 22:50

Нашел на просторах интернета данный код

<html>
  <head>
    <style>
      .hover {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="w1">
      <div id="block">Сюда надо навести</div>
    </div>
    <div id="w2">
      <div rel="block" class="hover">Текст появится</div>
    </div>
    <script>
      var bl = document.getElementById('block'),
        hv = document.querySelector('.hover');
      bl.onmouseover = function () {
        hv.style.display = 'block';
      }
      hv.onmouseout = function () {
        hv.style.display = 'none';
      }
    </script>
  </body>
</html>

Почему при переименовании элемента 'block' код перестает работать? Хочу сделать, чтобы на одной странице было 3 элемента при наведении на которые должны появляться разные сообщения.

http://jsfiddle.net/3pgbdq6m/ - не работает уже

Answer 1

$('div.container-focus').mouseover(function() { 
  $('.container').find('p').each(function() { 
    $(this).css('display', 'none'); 
  }); 
 
  var focus = $(this).attr('data-focus'); 
 
  $('.'+focus).css('display', 'block'); 
});

p { 
  display: none 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class="container"> 
  <div class="container-focus" data-focus="focus-1"> 
    Тут наводим 1 
  </div> 
  <p class="focus-1">Это показываем 1</p> 
 
  <div class="container-focus" data-focus="focus-2"> 
    Тут наводим 2 
  </div> 
  <p class="focus-2">Это показываем 2</p> 
 
  <div class="container-focus" data-focus="focus-3"> 
    Тут наводим 3 
  </div> 
  <p class="focus-3">Это показываем 3</p> 
</div>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Поиск нескольких имен в цикле

Что есть Набор данных в виде: Тема пиьма – Имя / комментарий, наборов может быть несколько, выполняется split по \n

javascript

Добавление атрибутa muted к тегу <audio> через JavaScript

пытался через js добавить атрибут 'muted' к аудио тегу, но попытки тщетныПри просмотре элементов все работает, но на деле же музыка продолжает...

127

javascript

Не считывается значение с radiobutton

У меня есть rest контроллер, который принимает json и записывает его в бдЕсть форма, с которой считываются значения после сабмита и отправляются...

150

javascript

Использование .bind() и оператор instanceof [дубликат]

Изучаю книгу из серии You dont know JS: cover this & objects, Келли Симпсона! Возник вопрос по оператору instanceof! Не понятна следующая фраза из книги:

118