Displaying text with the OnMouseOver () function

You could use 2 events:

• mouseover : show when mouseover
• mouseout : hide while drawing mouse

Remember that the above two events do not have bubble (they do not propagate, each child element will "inherit" the parent event). For example, in the code below I apply mouseover to the parent div only, but the div-child will also call the function when passing the mouse:

var p = document.getElementById("pai");

p.onmouseover = function(e){
  console.clear();
  console.log(e.target.id);
}

#pai{
   width: 200px;
   height: 100px;
   background: red;
}

#filho{
   width: 100px;
   height: 50px;
   background: yellow;
}

<div id="pai">
  pai
  <div id="filho">
     filho
  </div>
</div>

Using events (recommended):

• mouseenter : show when mouseover
• mouseleave : hide while drawing mouse

These events have blubble , that is, it fires in every% of% to which the event was assigned, having children or not. In the example below, when you also move the mouse on the div child, the parent div event is only triggered once:

var p = document.getElementById("pai");

p.onmouseenter = function(e){
  console.log(e.target.id);
}

#pai{
   width: 200px;
   height: 100px;
   background: red;
}

#filho{
   width: 100px;
   height: 50px;
   background: yellow;
}

<div id="pai">
  pai
  <div id="filho">
     filho
  </div>
</div>

The example you linked in the question uses the div method of jQuery. This method has two functions for two events: .hover and mouseenter , in this order:

$(seletor).hover(

   function(){
      // função do mouseenter (quando o mouse "entra", passa por cima)
   }
   ,
   function(){
      // função do mouseleave (quando o mouse sai de cima)
   }

);

Example:

$("#pai").hover(

   function(){
      $(this).css("background", "blue");
   }
   ,
   function(){
      $(this).css("background", "red");
   }

);

#pai{
   width: 200px;
   height: 100px;
   background: red;
}

#filho{
   width: 100px;
   height: 50px;
   background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divid="pai">
  pai
  <div id="filho">
     filho
  </div>
</div>

Edit

Since the response was a bit lengthy and while I was writing it, the question title changed by changing its meaning , and to respond with the new title, I would say it will depend a lot on the structure of your code.

A simple example would be as below, where I have a mouseleave with the name of the State within a span that would be the area of the State. When I hover over div , I show div , when I remove the mouse, I hide it.

See that I created two events within a loop by applying them to all span s with the div class.

Now, to assemble the map of Brazil and apply the events is already another question. In the example you linked to in the question, the map is mounted using% w / strong>), which is even more appropriate than using an image. If you are going to use an image you will have to map each state using the .estado tag ( how to use ).

var estados = document.querySelectorAll('.estado');
for(var x=0; x<estados.length; x++){
   estados[x].onmouseenter = function(){
   
      this.querySelector('span').style.display = 'inline-block';
   
   }

   estados[x].onmouseleave = function(){
   
      this.querySelector('span').style.display = 'none';
   
   }
}

.estado{
   width: 300px;
   height: 100px;
   background: blue;
   position: relative;
   margin: 3px;
}

.estado span{
   display: none;
   padding: 5px;
   background: white;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Passe o mouse:
<div class="estado">
   <span>Distrito Federal</span>
</div>
<div class="estado">
   <span>São Paulo</span>
</div>

Edit 2

In the example above, when you have a child element, you can only use CSS with the <svg> selector to change the behavior of the child element, without the need to use JavaScript. But like I said, it will depend a lot on the structure you want to mount.

.estado{
   width: 300px;
   height: 100px;
   background: blue;
   position: relative;
   margin: 3px;
}

.estado:hover span{
   display: inline-block;
}

.estado span{
   display: none;
   padding: 5px;
   background: white;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}

Passe o mouse:
<div class="estado">
   <span>Distrito Federal</span>
</div>
<div class="estado">
   <span>São Paulo</span>
</div>

References:

• Events:
  • mouseover
  • mouseout
  • mouseenter
  • mouseleave
• jQuery <map>
• CSS: hover