•  
     

Entre - jQuery

Vamos incluir nossa palavra reservada function e duas novas ações, mouseenter() e fadeTo().

mouseenter() faz exatamente o que você imagina: produz uma mudança quando o mouse entra em um dado elemento HTML. Por exemplo,

Código: Selecionar todos

$(document).ready(function() {
    $('div').mouseenter(function() {
        $('div').hide();
    });
});

poderia esconder cada <div> assim que você colocar o mouse sobre um deles. (Vamos descobrir como afetar somente um <div> entre muitos na próxima lição). Por enquanto, temos apenas um <div>, então não teremos problemas.

Ao invés de hide(), contudo, vamos colocar fadeTo() dentro de mouseenter(). fadeTo() recebe dois argumentos, ou entradas, entre seus parênteses, separados por uma vírgula: a velocidade de desvanecimento, e a opacidade (ou transparência) a ser atingida. Por exemplo,

Código: Selecionar todos

fadeTo('fast', 0.25);

faria com que o elemento rapidamente ficasse com 25% de sua opacidade original, fazendo com que ele fique com cores de tons claros.



HTML

Código: Selecionar todos

<!DOCTYPE html>
<html>
	<head>
		<title>Button Magic</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><br/><strong>Entre!</strong></div>   
	</body>
</html>



CSS

Código: Selecionar todos

div {
    height: 60px;
    width: 100px;
    border-radius: 5px;
    background-color: #69D2E7;
    text-align: center;
    color: #FFFFFF;
    font-family: Verdana, Arial, Sans-Serif;
    opacity: 0.5;
}



JavaScript

Código: Selecionar todos


$(document).ready(function(){
$('div').mouseenter(function(){
$('div').fadeTo('fast',0.1); 
});
});


Demo: http://jsfiddle.net/j7y50f4n/3/