JQuery MouseEnter/Mouse Leave Image Swap
Pergunta
Então, escrevi esse pequeno código para experimentar uma nova maneira de fazer uma troca de imagem para fins de pré -carregamento e estou tendo um pouco de problemas.
Meu problema é que eu tenho um contêiner com as imagens que têm algum preenchimento e texto, mas a ativação da minha rolagem só acontece quando alguém rola sobre a imagem, em vez do contêiner. Devo ter um pouco de errado, espero que alguém possa me ajudar. Ainda aprendendo!
Aqui está o html:
<div class="projectThumb">
<img src="/img/aeffect_button_static.gif" width="146" height="199" class="static" name="aeffect" alt="" />
<img src="/img/aeffect_button_rollover.jpg" width="146" height="199" class="rollover" name="aeffect" alt="" />
<p class="title">A.EFFECT: Film Poster</p>
</div>
Aqui está o jQuery:
$(document).ready(function(){
$(".rollover").hide();
$(".projectThumb").mouseenter(
function(){
$(this).attr(".static").hide();
},
function(){
$(this).attr(".rollover").show();
});
$(".projectThumb").mouseleave(
function(){
$(this).attr(".rollover").hide();
},
function(){
$(this).attr(".static").show();
});
});
Solução
Eu acho que você está procurando flutuar:
$(document).ready(function(){
$(".rollover").hide();
$(".projectThumb").hover(
function(){
$(this).find(".static,.rollover").toggle();
},
function(){
$(this).find(".static,.rollover").toggle();
});
});
Tanto o MouseEnter quanto o Mouseleave são apenas um argumento, mas você está definindo duas funções de retorno de chamada.
Outras dicas
Por que nao tentar:
$(".projectThumb").bind("mouseenter mouseleave", function(e) {
$(this).toggle();
});
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow