1

Estou aprendendo mexer com javascript, e olhando esse snippet que mostra o mapa do Brasil e seus estados me surgiu uma duvida. Como posso fazer aparecer o nome do estado ao colocar o mouse por cima do estado em javascript?

Exemplo do que eu quero atingir:

inserir a descrição da imagem aqui

5
  • MouseUp é o evento que ocorre quando você "solta" um dos botões do mouse. MouseDown é disparado quando você pressiona um dos botões. O que você quer é onmouseover Commented 19/07/2018 às 18:29
  • Como o amigo falou ou vc usa o onmouseover do JS, ou nesse caso do mapa o que eu indicaria é o :hover do próprio CSS
    – hugocsl
    Commented 19/07/2018 às 18:30
  • @WilliamJohnAdamTrindade sim é bem isso mesmo, mas como faço para aparecer o nome?
    – SHRIMP
    Commented 19/07/2018 às 18:45
  • @hunterxhunter Você entendeu o Snippet? Ele usa o JQuery ,evento hover sobre um link que tem como background um SVG. Você quer fazer a mesma coisa? Pelo que eu vi no seu exemplo você usa uma imagem. Commented 19/07/2018 às 18:54
  • @WilliamJohnAdamTrindade o exemplo é so para explicar melhor o que quero atingir, porém utilizando o snippet mesmo.
    – SHRIMP
    Commented 19/07/2018 às 18:57

1 Resposta 1

2

Você poderia usar 2 eventos:

  • mouseover: mostrar ao passar o mouse
  • mouseout: esconder ao tirar o mouse

Vale lembrar que os dois eventos acima não possuem bubble (não se propagam, cada elemento filho "herdará" o evento do pai). Por exemplo, no código abaixo aplico mouseover apenas na div-pai, porém a div-filho também chamará a função ao passar o 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>

Usando os eventos (recomendado):

  • mouseenter: mostrar ao passar o mouse
  • mouseleave: esconder ao tirar o mouse

Estes eventos possuem blubble, ou seja, é disparado em toda div a qual o evento foi atribuído, tendo filhos ou não. No exemplo abaixo, ao passar o mouse também na div-filho, é disparado o evento da div-pai apenas uma vez:

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>

O exemplo que você lincou na pergunta utiliza o método .hover do jQuery. Este método possui duas funções para dois eventos: mouseenter e mouseleave, nesta ordem:

$(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)
   }

);

Exemplo:

$("#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

Como a resposta foi um pouco longa e enquanto eu a estava redigindo, o título da pergunta foi alterado mudando seu sentido, e para responder com o novo título, eu diria que vai depender muito da estrutura do seu código.

Um exemplo simples seria como abaixo, onde eu tenho um span com o nome do Estado dentro de uma div que seria a área do Estado. Ao passar o mouse sobre a div, eu mostro o span, ao retirar o mouse, eu o escondo.

Veja que criei dois eventos dentro de um laço aplicando-os a todas as divs com a classe .estado.

Agora, para montar o mapa do Brasil e aplicar os eventos já é outra questão. No exemplo que você lincou na pergunta, o mapa é montado usando <svg> (como usar), que é até o mais indicado do que usar uma imagem. Se for usar uma imagem você terá que mapear cada Estado usando a tag <map> (como usar).

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

No exemplo acima, quando possui um elemento filho, você pode usar apenas CSS com o seletor :hover para alterar o comportamento do elemento filho, sem a necessidade de usar JavaScript. Mas como eu disse, isso dependerá muito da estrutura como você quer montar.

.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>

Referências:

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .