Hiding/appearing widgets

Dear community,

For quite some time I am searching for a possibility to create widget that are hidden, but that also appears on screen when a cursor is moved to a specific area.
I have found a relatable topic and did try to do some coding according to the information given, yet... I didn't manage to get any result
So I was wondering maybe someone could help me with providing any relevant information/tutorial about the possible way to do this hide/reveal widget coding?

My forum link: www.seoul-arts.com
Version: phpBB2

How about this:  https://help.forumotion.com/t78898-show-hide-widgets-script#509241 ?

Dear @SLGray, thank you for your suggestion. Sadly, it's not exactly what I was looking for

Try this

Code:

<style>
.hiddenstyle{display:none;}
</style>

<h1 id="demo">Mouse over me</h1>

<div id="hiddenwidget" class="hiddenstyle">
  something hidden
</div>

<script>
document.getElementById("demo").addEventListener("mouseover", mouseOver);
document.getElementById("demo").addEventListener("mouseout", mouseOut);

function mouseOver()
{
    var element = document.getElementById("hiddenwidget");
    element.classList.remove("hiddenstyle");
}

function mouseOut()
{
    var element = document.getElementById("hiddenwidget");
    element.classList.add("hiddenstyle");
}
</script>