Mit onmouseover zum anzeigen von QuickInfo in javascript

Ich versuche, javascript zu verwenden, zum erstellen von kleinen Dialog-Boxen, die dem Benutzer nahelegen, wie Sie Daten in ein Feld, wenn Sie über Ihnen schweben. Ich bin sehr neu mit javascript, so dass ich sein könnte, geht über das komplett der falsche Weg. Unten ist mein code:

HTML

        <html>
            <body>

            <div>
            <button id="button" onmouseover="mOver(this)" onmouseout="mOut(this)">?</button>
            </div>

            <script>
            function mOver(obj)
            {
            obj.innerHTML="<div id='help_container'><button id='close'>X</button><p id='help_text'>Help Text</p></div>"
            }

            function mOut(obj)
            {
            obj.innerHTML="<button id='button' onmouseover='mOver(this)' onmouseout='mOut(this)'>?</button>"
            }
            </script>
            </script>
         </body>


        <style type="text/css">
            #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;
            }
        </style> 
</html>

Jedoch die Funktion nicht arbeiten, Veränderungen passieren, wenn die Maus über und Weg von der button - tag, aber nicht die änderungen, die ich erwartet hatte. Ich hatte gehofft, eine kleine div erscheint mit Hilfe von text innen geschrieben. Idealerweise würde ich auch gerne einen schließen-button erscheint innerhalb der div könnte eine Funktion aufrufen onclick und entfernen Sie die div aber ich bin nicht sicher, wie zu entfernen von Elementen mithilfe der onlick Methode.
Jede Hilfe, die zur Lösung der onmouseover - Funktion oder wie Sie implementieren einen Weg der Schließung der div mit onlick würde sehr geschätzt werden.
Vielen Dank im Voraus

InformationsquelleAutor user3298004 | 2014-04-01
Schreibe einen Kommentar