Javascript "dinamico" de acordo com a Div

[Luc.Vysk 0]

Olá gente, novamente estou aqui querendo uma ajuda.

Eu tenho uma página produtos, e quero que quando a pessoa passar o mouse em cima da imagem, apareça uma div, em cima da respectiva imagem, com a escrita "Veja mais".

 

No entanto, não consegui controlar ela, está aparecendo em todos os produtos. Tentei fazer pelo id, mas também não consegui.

 

Javascript:

function sprodl() {

$('.prod_img').hover(
function () {
	$('.prod_link').fadeIn('fast');	
}, function() {
	$('.prod_link').fadeOut('fast');	
});

}

 

HTML:

 

<div class="prod_img" id="prod-<?php the_ID(); ?>">
<?php 		  
if ( has_post_thumbnail()) {
	echo '<a id="post-'.$post->ID.'" title="' . the_title_attribute('echo=0') . '">';
	echo get_the_post_thumbnail($post->ID, 'feature'); 
	echo '</a>';
}

?>
<div id="prod_link-<?php the_ID(); ?>" class="prod_link"><a href="<?php echo get_permalink(); ?>">Veja mais</a></div>

[William Bruno 1501]

Estude sobre o objeto this

 

 

leitura:

http://wbruno.com.br/blog/2011/06/21/afinal-e-javascript/

[Luc.Vysk 0]

Pois é, eu procurei fazer de várias maneiras com o método "this", no entanto não consegui. Pois não é quando clica, e sim passa o mouse em cima.

 

Cheguei até conseguir mostra o id da div (prod-12), mas ainda não consegui mostrar a div 'veja mais' do modo certo.

Acredito que tenha errado nessa chamadas do CSS para Jquery.

 

Você consegueria exemplificar isso para mim no meu caso William? Por favor

[William Bruno 1501]

       $('.prod_img').hover(
       function () {
               $( this ).next('.prod_link').fadeIn('fast'); 
       }, function() {
               $( this ).next('.prod_link').fadeOut('fast');        
       });

tanto faz o evento.. o importante é o conceito.

[Luc.Vysk 0]

Eu não entendi o pq do "next". E ainda assim isso funcionaria para todas as divs, não?

 

O que quero fazer é que na lista de todos os produtos, quando você passar o mouse em cima da imagem dele, apareça umk botão no respectivo produto "veja mais".

 

Havia tentado algo como colocar na div(html):

 

onmouseover="sprodl($id)"

 

e no js:

 

function sprodl(this.$id) {        

...

}); 

 

Algo dessa forma, pois não posso lhe confirmar ao certo pois não estou em casa, desculpe. No entanto apesar de conseguir pegar o id da Div, não consegui fazer com que a div aparecesse.

[William Bruno 1501]

Eu não entendi o pq do "next".

você testou ? teste.

 

E ainda assim isso funcionaria para todas as divs, não?

veja:

http://api.jquery.com/next/

[Luc.Vysk 0]

Testei e não saiu nada. Mas eu consegui desta maneira:

 

 

 

<div class="prod_img" id="imgprod-<?php the_ID(); ?>" onmouseover="sprodl(this.id)">

...

<div id="link-imgprod-<?php the_ID(); ?>" class="prod_link"><a href="<?php echo get_permalink(); ?>">Veja mais</a></div>

 

 

function sprodl($id) {

$('#'+$id).hover(

function () {
	 $('#link-'+$id).fadeIn('fast');	
}, function() {
	 $('#link-'+$id).fadeOut('fast');	
});

}

 

No entanto, tem um pequeno problema. Quando eu passo o mouse em cima do produto pela primeira vez não funciona no Firefox. Só funciona na segunda. Sabe qual pode ser o motivo desse problema?