Javascript Hover Selector
Mittels des Javascript Hover Selektors wird ein "Mouseover-Effekt" getriggert.
Jeweils eine Javascript-Funktion(
onmouseover wird benötigt um zu triggern, wenn die Maus über/in das Element fährt. Eine zweite Funktion(
onmouseout) triggert das verlassen der Maus dieses Bereichs.
Die Funktionen werden hier
showtext() und
hidetext() benannt. Zu beachten ist, dass auch das richtige DOM-Element gewählt wird. Mittels
document.getElementById wird das jeweilige Element ausgewählt, welches manipuliert werden soll.
Der Javascript-Teil:
001
002
003
004
005
006
007
008
009
010
011
<script>
function showtext() {
document.getElementById("demo").innerHTML = Date();
}
function hidetext() {
document.getElementById("demo").innerHTML = "hover to show the date here";
}
</script>
Das DOM-Element, welches Manipuliert wird, muss die zugehörige ID besitzen(hier
demo). In diesem Beispiel manipulieren wir ein DIV.
Das Div, welches mittels Javascript über Hover manipuliert wird:
001
002
003
<div style = "..." id = "demo" onmouseover="showtext()" onmouseout="hidetext()" width="32" height="32">
hover to show the date here
</div>
Wird die Maus über das div bewegt, so wird mittels Javascript in das DIV das aktuelle Datum geschrieben.
hier ein Inline-Demo:
hover to show the date here
Und hier noch eine Testseite mit dem Beispiel:
example page
