The 5 Mouseover Tips with JavaScript

The 5 Mouseover Tips with JavaScript

The 5 Mouseover Tips with JavaScript


 

 

Introduction & Demo

In the video, I introduce 5 mouseover tips with JavaScript!

Tips are:

  1. Change the text color.
  2. Change the background color.
  3. Change the text.
  4. Change the font size.
  5. Show the hidden (or invisible) element.

 

Before you start, please check the demo from here.

Hope these tips will be helpful to improve user experiences on your site!

 
 

Sample Code

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>The 5 Mouseover Tips</title>
	<link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
	
	<style type="text/css">
		* {
			font-family: 'Varela Round', sans-serif;
		}
		.container {
			width: 400px;
			margin: 50px auto;
		}
		h1 {
			text-align: center;
		}
 
		li {
			font-size: 20px;
			background-color: whitesmoke;
			margin-top: 30px;
			padding: 20px;
		}
	</style>
 
	<script type="text/javascript">
	
		function changeColor(obj) {
			
			if (obj.style.color == 'orange') {
				obj.style.color = 'black';
				
			} else {
				obj.style.color = 'orange';
			}
		}
		
		function changeBgColor(obj, colorName) {
			obj.style.backgroundColor = colorName;
		}
		
		function changeText(obj, text) {
			obj.innerText = text;
		}
		
		function scaleUp(obj, size) {
			obj.style.fontSize = size;
		}
		
		function showSix() {
			var element = document.getElementById("six");
			
			if(element.style.visibility == "hidden"){
				//element.style.display = "block";
				element.style.visibility = "visible";
			} else {
				//element.style.display = "none";
				element.style.visibility = "hidden";
			}	
		}
	</script>
</head>
<body>
<div class="container">
	<h1>The 5 Mouseover Tips</h1>
	<br>
	<ol>
		<li onmouseover="changeColor(this)" onmouseout="changeColor(this)">Change text color.</li>
		<li onmouseover="changeBgColor(this,'skyblue')" onmouseout="changeBgColor(this, 'whitesmoke')">Change background color.</li>
		<li onmouseover="changeText(this,'Hello!')" onmouseout="changeText(this,'Change text.')">Change text.</li>
		<li onmouseover="scaleUp(this,'30px')" onmouseout="scaleUp(this,'20px')">Scale up!</li>
		<li onmouseover="showSix();" onmouseout="showSix()">Show 6th row.</li>
		<li id="six" style="visibility:hidden; background: lightgreen;">This is 6th.</li>
	</ol>
</div>
</body>
</html>

 
 

References

Google Fonts: https://fonts.google.com/

 

About Sara

Working as a freelance programmer in Japan. I'll try to make coding as simple as possible. Hope you enjoy coding 🙂