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
- dies ist, was Sie wollen, jsfiddle.net/fTpwF
Du musst angemeldet sein, um einen Kommentar abzugeben.
Können Sie die Verwendung von bootstrap oder andere javascript-Bibliotheken, die zusammen mit jQuery für den gleichen Zweck. Ist es besser, Sie zu benutzen, Bitte haben Sie einen Blick auf,
HTML
Skript
JS:
CSS:
HTML:
Kann mit Hilfe von CSS und html nur..
CSS:
HTML:
Ich glaube nicht, dass deine js-Funktion hat nichts falsch, aber deine html-Struktur ist wirklich in einem Schlamassel. Ich änderte die Struktur des HTML-und realisieren Sie die Funktion, die Sie, was mit dem gleichen code, den Sie bieten.
innerHTML
evil! Sie können nicht Ihre Firefox-Erweiterung, die auf Mozilla-Website, wenn Sie Ihren code verwendeninnerHTML
.mit Ihrem code arbeiten Sie mit der Taste, nicht div. um Einfluss auf die div mit
innerHTML
man braucht so etwas wie dieses:werden, um X-Taste zu arbeiten, verwenden Sie diese: