Fórum JavaScript - Eventos #528517
12/08/2015
0
<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
Curtir tópico
+ 0Posts
12/08/2015
Randrade
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
12/08/2015
Gabriela Monte
Para deixar um pouco lento esse evento, somente com css?
Gostei + 0
12/08/2015
Randrade
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
12/08/2015
Gabriela Monte
Sobre a lentidão, que a "animação" fique um pouco lenta!
Gostei + 0
13/08/2015
Randrade
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
13/08/2015
Gabriela Monte
Gostei + 0
13/08/2015
Jothaz
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
13/08/2015
Gabriela Monte
Gostei + 0
13/08/2015
Jothaz
Tente ver este exemplo http://jsfiddle.net/b0zdko6z/ é o que você quer mas usa o jQuery.
Gostei + 0
13/08/2015
Gabriela Monte
Gostei + 0
13/08/2015
Jothaz
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
13/08/2015
Gabriela Monte
Gostei + 0
13/08/2015
Jothaz
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
13/08/2015
Gabriela Monte
Gostei + 0
13/08/2015
Jothaz
Gostei + 0
Clique aqui para fazer login e interagir na Comunidade :)