JavaScript - Eventos
Sobre um tipo de evento especifico, o "onmouseover" é bem interessante, mas como faço para o mesmo voltar ao seu estado de antes, pois acontece o evento e ele não volta automaticamente?
Se eu quiser colocar na tag <script> como faço?
<h1 onmouseover="this.innerHTML='Olá meu amigo'">Passe o cursor do mouse.</h1>
Se eu quiser colocar na tag <script> como faço?
<script type="text/javascript">
</script>
Gabriela Monte
Curtidas 0
Respostas
Randrade
12/08/2015
Olá Gabriela,
Em seu exemplo, você não definiu a saída, tente algo como:
[url:descricao=Olhe seu exemplo aqui!]http://jsfiddle.net/randrade/oqofd9x8/[/url]
Porém, você pode trabalhar com ele de outras formas, igual este exemplo.
Em seu exemplo, você não definiu a saída, tente algo como:
<h1 onmouseover="this.innerHTML='Olá meu amigo'" onmouseout="this.innerHTML='Passe o cursor do mouse.'">Passe o cursor do mouse.</h1>
[url:descricao=Olhe seu exemplo aqui!]http://jsfiddle.net/randrade/oqofd9x8/[/url]
Porém, você pode trabalhar com ele de outras formas, igual este exemplo.
GOSTEI 0
Gabriela Monte
12/08/2015
O código que me passou funcionou perfeitamente! Os dois links não abrem!
Para deixar um pouco lento esse evento, somente com css?
Para deixar um pouco lento esse evento, somente com css?
GOSTEI 0
Randrade
12/08/2015
O código que me passou funcionou perfeitamente! Os dois links não abrem!
Para deixar um pouco lento esse evento, somente com css?
Para deixar um pouco lento esse evento, somente com css?
Teste os links aqui e abriram normalmente.
Somente com isso você não irá sentir diferença em seu site. Caso fique lento, não será por isso.
GOSTEI 0
Gabriela Monte
12/08/2015
Abriu os links!
Sobre a lentidão, que a "animação" fique um pouco lenta!
Sobre a lentidão, que a "animação" fique um pouco lenta!
GOSTEI 0
Randrade
12/08/2015
Abriu os links!
Sobre a lentidão, que a "animação" fique um pouco lenta!
Sobre a lentidão, que a "animação" fique um pouco lenta!
Como você está iniciando, não se preocupe com isso, até porque esse evento é muito utilizado. Até pq, geralmente, você carrega primeiro os css, a página, e por fim os scrips. Alguns sites "aparecem" para o usuário, mesmo sem carregar todos os scripts. Você pode notar isso, quando você acessa um site, e ele vai "dançando" para você. Aparece uma janela ali, algo muda de formato aqui, etc.
Muitas vezes isso é normal. Não é bom, mas é normal...kkkkk
[url:descricao=Neste exemplo,]http://jsfiddle.net/randrade/oqofd9x8/1/[/url] eu coloquei vários onMouseOver, e você pode notar que está da mesma forma, do que se tivesse apenas um.
GOSTEI 0
Gabriela Monte
12/08/2015
Randrade, eu quero que a função aconteça de forma lenta, não passar o mouse e acontecer rápido entendeu?
GOSTEI 0
Jothaz
12/08/2015
Randrade, eu quero que a função aconteça de forma lenta, não passar o mouse e acontecer rápido entendeu?
Você quer implementar alguma coisa ou só pro curiosidade?
Porque estes eventos estão disponíveis para todos os controles da página, então ao passar o mouse sobre o controle estes eventos são disparados. Eles são usados para mudar imagens, botões, mensagens ou exibir hint´s entre outra coisas.
Ao mudar o tempo de exibição, nem sei se é possível mas existe o setTimeout() que talvez possa ajudar, você vai causar um bagunça na lógica do funcionamento deste eventos e irá comprometer como a página funciona. Pois tudo funciona encadeado.
Não vejo muita utilidade em alterar isto, mas o que você pretende com esta mudança?
Com jQuery dá para usar, mas não sei se vai te ajduar:
var timer;
$('.img').on({
'mouseover': function () {
timer = setTimeout(function () {
// do stuff
}, 1000);
},
'mouseout' : function () {
clearTimeout(timer);
}
});
GOSTEI 0
Gabriela Monte
12/08/2015
Oi Jothaz? rsrsrsr.
GOSTEI 0
Jothaz
12/08/2015
Oi Jothaz? rsrsrsr.
Tente ver este exemplo http://jsfiddle.net/b0zdko6z/ é o que você quer mas usa o jQuery.
GOSTEI 0
Gabriela Monte
12/08/2015
Confesso que não entendi! Mas é para deixar o evento mais lento?
GOSTEI 0
Jothaz
12/08/2015
Isso! É justamente o que você quer.
Ao passar o mouse sobre o texto Hello World vai aparecer um mensagem tipo hint. Só que vai demorar um tempo maior para exibir e mara sumir.
Você pode mudar os valores das variáveis delay e delay 2. Clicar em "Run" para ver como muda.
Só que usa jQuery.
Ao passar o mouse sobre o texto Hello World vai aparecer um mensagem tipo hint. Só que vai demorar um tempo maior para exibir e mara sumir.
Você pode mudar os valores das variáveis delay e delay 2. Clicar em "Run" para ver como muda.
var delay = 1500, setTimeoutConst,
delay2 = 500, setTimeoutConst2;
Só que usa jQuery.
GOSTEI 0
Gabriela Monte
12/08/2015
Legal, mas não tem como fazer com css? JQuery deixar para depois.
GOSTEI 0
Jothaz
12/08/2015
Legal, mas não tem como fazer com css? JQuery deixar para depois.
Css é para estilos e formatação de lay-out e controles. Não tem como tratar eventos no CSS, isto pertence ao JavaScript e CSS não tem nada a ver com JavaScritp.
São usados em conjunto, mas estão em escopos diferentes.
Seria um bom exercício tentar usar o setTimeOut como o onmouse.
GOSTEI 0
Gabriela Monte
12/08/2015
É que ja vi exemplos de "animações" feitas com o css e pensei que poderia ser inserido nesse exemplo, mas dica foi dada, Obrigada.
GOSTEI 0
Jothaz
12/08/2015
Existe a propriedade animation no CSS veja exemplo aqui e aqui, porém não esta relacionada aos eventos do JavaScript que estamos usando.
GOSTEI 0
Gabriela Monte
12/08/2015
Gostei desses efeitos, só não sei em qual tipo de site colocaria! rsrsrs.
GOSTEI 0
Gabriela Monte
12/08/2015
Forum ta estranho, não lembro dessas suas mensagens.
GOSTEI 0