0

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

<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/ - не работает уже

4
  • Всё работает. Если вы тестируете не на компьютере, то работать не будет, т.к здесь действие выполняется при наведении именно курсора мышки. Используйте focus и focusout для того, чтобы это работало на всех устройствах 28 апр 2019 в 17:14
  • Обновил ссылку, мне надо сделать 3 разных элемента при наведении на которые должны появляться разные сообщения. Если просто переименовывать, то работать не будет. 28 апр 2019 в 17:25
  • Если JQuery интересует, то могу написать. 28 апр 2019 в 17:30
  • добавил ответ посмотрите 28 апр 2019 в 17:48

1 ответ 1

0

$('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>

3
  • Евгений создайте блок с нужным текстом. И при наведении показывайте его в нужном месте. Даже если текст в другом блоке, практически у любого объекта HTML есть свойство innerHTML которое позволит вам достать содержимое. 28 апр 2019 в 17:58
  • Можно пример, пожалуйста? 28 апр 2019 в 18:02
  • @Евгений исправил, теперь элемент с текстом может находиться в любом месте 28 апр 2019 в 18:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.