CodePen

HTML

            
              <html><head><title>Title</title>

<SCRIPT LANGUAGE="JavaScript">
    function changeContent1()
    {
        document.getElementById("myDiv").innerHTML='<a href="#" onmouseout="changeContentBack1()" style="text-decoration:none"><div style="background:black;color:white;width:450px;height:203px">THIS TEXT APPEARS ON CLICK OR ROLLOVER</div>'
    }
  </SCRIPT>
  
  <SCRIPT LANGUAGE="JavaScript">
    function changeContentBack1()
    {
        document.getElementById("myDiv").innerHTML='<a href="#" onmouseover="changeContent1()" style="text-decoration:none"><div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT</div></a>'
    }
  </SCRIPT>
  
</head>
<body>

	<div style="width:450px;float:left">This is the section title. <a href="#" onclick="changeContent1()"><a href="#" onclick="changeContent1()">Click for more info</a><br><br>
		<div id="myDiv"><a href="#" onmouseover="changeContent1()" style="text-decoration:none">
			<div style="background:red;color:white;width:450px;height:203px">ORIGINAL TEXT
			</div></a>
		</div>
	</div>
</body>
</html>

  
            
          
!
via HTML Inspector

CSS

            
              
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................