I have a views template called: views-view-fields--video--block-1.tpl.php

Inside that file i have:

<script type="text/javascript">
  $(document).ready(function() {
    $('.last-vid-block .imagecache').hover(function() {
      $('a.play_button').fadeIn('slow');
    }, function() {
        $('a.play_button').fadeOut('slow');
      }
    );
  });
</script>

<?php

print '<div class="last-vid-block">';

print '<div style="float: left; margin-right: 8px;">'. $fields['field_video_embed']->content.'</div>';

print '<h3 class="video-block">'. $fields['title']->content .'</h3>';

$hover_play = l('<img src="/' . path_to_theme() . '/img/play-button.png" />', 'node/' . $row->nid, array('attributes' => array('class' => 'play_button', 'style' => 'display: none'), 'html' => true));

print $hover_play;

print '</div>'; // vgrid

?>

As you can see in my JS code at the top of the template, i'm printing $hover_play when user hovers over .last-vid-block .imagecache object, so it fades In then fades Out, that works, yeah.

But the problem is -> i have in that views block 4 nodes with that markup, so when i hover over just one .last-vid-block .imagecache that $hover_play shows on all 4 objects... How to separate them - if i hover just 1st object $hover_play shows only at 1st object etc... Thanks in advance!

I have a views template called: views-view-fields--video--block-1.tpl.php

Inside that file i have:

<script type="text/javascript">
  $(document).ready(function() {
    $('.last-vid-poster').hover(function() {
        $(this).parents('.last-vid-block').find('a.play_button').fadeIn('slow');
      }, function() {
        $(this).parents('.last-vid-block').find('a.play_button').fadeOut('slow');
      }
    );
  });
</script>

<?php

print '<div class="last-vid-block">';

print '<div style="float: left; margin-right: 8px;">'. $fields['field_video_embed']->content.'</div>';

print '<h3 class="video-block">'. $fields['title']->content .'</h3>';

$hover_play = l('<img src="/' . path_to_theme() . '/img/play-button.png" />', 'node/' . $row->nid, array('attributes' => array('class' => 'play_button', 'style' => 'display: none'), 'html' => true));

print $hover_play;

print '</div>'; // vgrid

?>

As you can see in my JS code at the top of the template, i'm printing $hover_play when user hovers over .last-vid-block .imagecache object, so it fades In then fades Out, that works, yeah.

But the problem is -> i have in that views block 4 nodes with that markup, so when i hover over just one .last-vid-block .imagecache that $hover_play shows on all 4 objects... How to separate them - if i hover just 1st object $hover_play shows only at 1st object etc... Thanks in advance!

ATTENTION! Edited js code at the top! It works as intended, is there any erros in that code?