My goal is to utilize JavaScript along with the HTML events "onmouseover" and "onmouseout" to create a dynamic container. Essentially, I want the container to act as simply a heading when the mouse is not hovering over it, but expand to display additional information when it is hovered over.
As shown in the example below, I have successfully implemented this feature to reveal extra text about bicycles:
<div class="content" onmouseover="document.getElementById('Bicycle_Text').style.display='block'">
<h1>The Bicycle</h1>
<p id="Bicycle_Text" style="display:none">Bicycles were first introduced in the 19th century in Europe.</p>
</div>
However, I am now facing the challenge of making the division return to its original unexpanded state when the mouse moves away from it. My idea is to use the "onmouseout" event paired with changing the Javascript to display 'None', yet I am uncertain how to incorporate both "onmouseover" and "onmouseout" events into the same line of code.
If anyone has any suggestions on accomplishing this task or knows of an alternative approach that may yield similar results, I would greatly appreciate your input. While I am familiar with the CSS hover function, I am struggling to replicate the expansion functionality seen in my current implementation. Thank you for your help!