<div><b onmouseout="mys()" onmouseover="my()">Happy Christmas</b></div>
@import url('https://fonts.googleapis.com/css2?family=Frijole&display=swap');

body {
  background-image: linear-gradient( green);
}

div {
  background: -webkit-linear-gradient(red, green);
    -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: 'Frijole', fantasy;
  text-shadow: 0px 4px black;
  font-size: 2em;
  transform: translate(-50%, -50%);
  top: 30%;
  left: 50%;
  position: absolute;
}

* {
  box-sizing: border-box;
  user-select: none;
}
function my() {
  document.getElementsByTagName("B")[0].innerHTML = "<h1><p>For You!</p></h1>";
}

function mys() {
  document.getElementsByTagName("B")[0].innerHTML="Happy Christmas";
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.