html — использование «onmouseover» для отображения всплывающей подсказки в JavaScript

Использование «onmouseover» для отображения всплывающей подсказки в JavaScript

Я пытаюсь использовать JavaScript для создания небольших диалоговых окон, которые советуют пользователю, как вводить данные в поле при наведении на них курсора. Я чрезвычайно новичок в использовании JavaScript, так что я могу пойти по этому пути совершенно неправильно.

Ниже мой код:

 {amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;style type="text/css"{amp}gt; #button { border-radius: 50%; border: 1px solid black; padding-top: 3px; padding-bottom: 3px; } #info { margin-left: 5%; } #help_container { border: 0.5px solid black; background-color: #efefef; width: 20%; } #close { float: right; margin-top: 1%; background-color: #efefef; border: 0px solid #efefef; } #help_text { margin: 5%; font-family: Arial; font-size: 15px; } {amp}lt;/style{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div{amp}gt; {amp}lt;button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)"{amp}gt;?{amp}lt;/button{amp}gt; {amp}lt;/div{amp}gt; {amp}lt;script{amp}gt; function mOver(obj) { obj.innerHTML = "{amp}lt;div id='help_container'{amp}gt;{amp}lt;button id='close'{amp}gt;X{amp}lt;/button{amp}gt;{amp}lt;p id='help_text'{amp}gt;Help Text{amp}lt;/p{amp}gt;{amp}lt;/div{amp}gt;"; } function mOut(obj) { obj.innerHTML = "{amp}lt;button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'{amp}gt;?{amp}lt;/button{amp}gt;"; } {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

Однако эта функция не работает, изменения происходят при наведении курсора на button а не на те изменения, которые я ожидал. Я надеялся, что маленький div появится с текстом помощи, написанным внутри. В идеале я хотел бы, чтобы внутри div отображалась кнопка закрытия, которая могла бы вызывать функцию onclick и удалять div но я не уверен, как удалять элементы, используя метод onlick .

onlick весьма благодарны за любую помощь в том, как решить функцию onmouseover или как реализовать способ закрытия div с помощью onlick .

заранее спасибо

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector