Found on the Internet this code

<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>

Why does the code stop working when the block element is renamed? I want to make sure that there are 3 elements on one page when you hover over which different messages should appear.

http://jsfiddle.net/3pgbdq6m/ - does not work already

  • Everything is working. If you are not testing on a computer, it will not work, because here the action is performed when you hover the mouse. Use focus and focusout to make it work on all devices - Denis Heavenly
  • Updated the link, I need to make 3 different elements when you hover on which should appear different messages. If you just rename, it will not work. - Eugene
  • If jQuery interests, then I can write. - Denis Heavenly
  • added answer look - Denis Heavenly

1 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>

  • Eugene create a block with the desired text. And when you hover, show it in the right place. Even if the text is in a different block, almost any HTML object has an innerHTML property that will allow you to extract content. - Vladlen Vozhzhaev 5:58 pm
  • Can you give an example, please? - Eugene
  • @ Eugene corrected, now the element with the text can be anywhere - Denis Heavenly