JQuery: Trabalhando com hover

O hover nada mais é do que o efeito de colocar e tirar o mouse de sobre algum elemento.

.div{
  width: 250px;
  height:250px;
  background-color:#000;
}
.lupa{ 
  position:relative;
  float:right;
  height:30px;
  line-height:30px;
  width:30px;
  background-color:#FF0000; 
  color:#FFFFFF; 
  text-align:center;
  display:none;
  padding:5px;
}
$(".div").hover(function(){
  $(this).find(".lupa").fadeIn();
}, function() {
  $(this).find(".lupa").fadeOut();	
});
$(".lupa").click(function(e){
  e.preventDefault();
  alert("cliquei na lupa");
});
<div class="div">
  <a href="#" class="lupa">lupa</a>
</div>

Clique aqui para ver o código funcionando.

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *