•  
     

Combinando .click() e .hover() - jQuery

Vamos adicionar mais um evento jQuery para a nossa simulação da "destruição de Krypton". Krypton não sumiu simplesmente, ele explodiu! Vamos fazê-lo ficar vermelho.

Código: Selecionar todos

$('div').hover(function(){
  $('div').addClass('green');
});

Seguindo o padrão que aprendemos, selecionamos Krypton, nosso $('div')
Então aplicamos nosso evento hover (deixar o mouse sobre) sobre o alvo selecionado.
Por fim, executamos o código dentro da função function(){} que adiciona a classe de green (verde) ao nosso alvo.

HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div></div>
</body>
</html>


CSS

Código: Selecionar todos

body {
    background-image: url('http://bit.ly/UpQgJ6');
    repeat: no-repeat;
}

div {
    height: 100px;
    width: 100px;
    border-radius: 100%;
    background-color: #008800;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#003500), to(#008800));
    background-image: -webkit-linear-gradient(left, #003500, #008800); 
    background-image:    -moz-linear-gradient(left, #003500, #008800);
    background-image:     -ms-linear-gradient(left, #003500, #008800);
    background-image:      -o-linear-gradient(left, #003500, #008800);
}

.red {
    background-color: #CC0000;
    background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#330000), to(#CC0000));
    background-image: -webkit-linear-gradient(left, #330000, #CC0000); 
    background-image:    -moz-linear-gradient(left, #330000, #CC0000);
    background-image:     -ms-linear-gradient(left, #330000, #CC0000);
    background-image:      -o-linear-gradient(left, #330000, #CC0000);
}


JavaScript

Código: Selecionar todos

$(document).ready(function(){
$('div').click(function(){
$(this).fadeOut('fast');
});
$('div').hover(function(){
$(this).addClass('red');
});
});


Demo: http://jsfiddle.net/0ma7nkkL/13/