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:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
span.element {
background: #28a745;
color: white;
}
span.text {
background: #bebebe;
color: black;
}
</style>
</head>
<body>
<span id="element" class="element">Hover me!</span>
<span id="text" class="text" style="display: none">Example text...</span>
<script>
var element = document.querySelector('#element');
var text = document.querySelector('#text');
element.addEventListener('mouseover', function() {
text.style.display = '';
});
element.addEventListener('mouseout', function() {
text.style.display = 'none';
});
</script>
</body>
</html>