EN
JavaScript - show text on hover
6 points
In this article, we would like to show you how to show text on hover using JavaScript.
Practical example:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
span.element {7
background: #28a745;8
color: white;9
}10
11
span.text {12
background: #bebebe;13
color: black;14
}15
16
</style>17
</head>18
<body>19
<span id="element" class="element">Hover me!</span>20
<span id="text" class="text" style="display: none">Example text...</span>21
<script>22
23
var element = document.querySelector('#element');24
var text = document.querySelector('#text');25
26
element.addEventListener('mouseover', function() {27
text.style.display = '';28
});29
element.addEventListener('mouseout', function() {30
text.style.display = 'none';31
});32
33
</script>34
</body>35
</html>
