Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17666
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Como fazer mouseover mouseout com material icons do google

20-12-2016 21:27

Nesse post vou mostrar um exemplo de como alternar as figuras ao passar o cursor sobre a mesma usando o Material icons do google api.

Nesse exemplo usarei o jQuery para fazer o efeito do mouseover e mouseout. Segue o exemplo:

<script src="jquery.js"></script> <script> $(function() { $(".material-icons").hover( function(){ $(this).html($(this).attr("data-on")); }, function(){ $(this).html($(this).attr("data-out")); } ); }); </script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <i class="material-icons" data-on="pause" data-out="play_arrow">play_arrow</i>

Nesse exemplo o ícone inicial é o botão de play. Que é trocado para o ícone de pause assim que passar o cursor sobre o ícone de play.

Os ícones do Material icons são definidos pelo nome. Como mostrado acima: pause e play_arrow.

Você pode obter vários nomes de ícones do Material icons nesse link https://material.io/icons/
4
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado