Javascript Hover selector
With the Javascript Hover Selector it is possible to trigger an mouse effect e.g. if the mouse "enters" the DOM-element or "leaves" it.
We are using two Javascript functions
onmouseover which triggers the mouse
entering the Dom-element and (
onmouseout) if the user leaves the DOM-element with the mouse. The two functions are called
showtext() and
hidetext(). It is essential to address the right DOM-element. With
document.getElementById the Element is selected which should be manipulated.
The Javascript part:
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>
The DOM-element, which should be manipulated must have the corresponding ID (here
demo). The element in this tutorial is a Div we are manipulating by Hovering the mouse over it.
001
002
003
<div style = "..." id = "demo" onmouseover="showtext()" onmouseout="hidetext()" width="32" height="32">
hover to show the date here
</div>
If the mouse is Hovering over the Div, the Javascript function
onmouseover writes the current date into the Div with the ID
demo here an Inline-Demo:
hover to show the date here
And a single page with the content described above:
example page
