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 div
s 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:
:hover
do próprio CSShover
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.