<!DOCTYPE html>
<html>
<head>
<script>
function mousegone() {
document.getElementById("plush").style.color = "magenta";
}
function mouseon() {
document.getElementById("plush").style.color = "red";
}
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
</script>
</head>
<body>
<div id="plush" onmouseover="mouseon()" onmouseout="mousegone()"><p id="bob">When you leave the input field, a function is triggered which transforms the input text to upper case.</p></div>
</body>
</html>