How to display text with the Onmouseover() function

Question

I’m learning to mess with javascript, and looking that snippet which shows the map of Brazil and its states I have a doubt. How can I make appear the name of the state by placing the mouse over the state in javascript?

Example of what I want to achieve:

Answer 1

You could use 2 events:

• mouseover: show when hovering the mouse
• mouseout: hide while taking the mouse

Remember that the two events above do not have Bubble (do not propagate, each child element will "inherit" the parent event). For example, in the code below apply mouseover only in the div-pai, but the div-filho 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 the events (recommended):

• mouseenter: show when hovering the mouse
• mouseleave: hide while taking the mouse

These events have blubble, that is, it is shot throughout div to which the event was attributed, having children or not. In the example below, when passing the mouse also in the div-child, the div-parent event is triggered only 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 gave in the question uses the method .hover jQuery. This method has two functions for two events: mouseenter and mouseleave, 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>
<div id="pai">
  pai
  <div id="filho">
     filho
  </div>
</div>

Edit

As the answer was a little long and while I was writing it, the question title was changed changing its direction, and to respond with the new title, I would say it will depend very much on the structure of your code.

A simple example would be like below, where I have a span with the name of the State within a div which would be the State area. By hovering the mouse over the div, I show the span, when removing the mouse, I hide it.

See that I created two events within a loop applying them to all divs with class .estado.

Now, to assemble the map of Brazil and apply the events is another issue. In the example that you linked in the question, the map is mounted using <svg> (how to use), 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 tag <map> (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 selector :hover 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 as you want to assemble.

.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 .hover
• CSS :Hover