<h3 id="magnifier">
My content will expad and change color once the mouse is over. This is really funny
</h3>
.magnify{
font-family: arial;
font-size: 300%;
color: blue;
}
.normalize{
font-family: sans-serif;
color: auto;
font-size: auto;
}
var magnifier = document.getElementById('magnifier');
magnifier.addEventListener('mouseover', magnify);
magnifier.addEventListener('mouseout', normalize);
//CallBack Function 1
function magnify(){
magnifier.className = 'magnify';
}
//Callback Function 2
function normalize(){
magnifier.className = 'normalize';
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.