Question

How can I get effect on specific row of grid veiw

<asp:GridView ID="gvSearch" runat="server" DataKeyNames="guidId" >
        <Columns>
          <asp:TemplateField>
           <ItemTemplate>
            <div class="test1"> "test paragraph"
            <img src="../Images/double-arrow.png" 
                 style="margin-left: 741px;margin- top:39px;"            
                 class="PreviewImage" 
                 onclick="DisplayImg('<%# Eval("guidId") %>')"/>
           </div>
          </asp:TemplateField>
        </Columns>
 </asp:GridView>

Now by using Jquery, how can I show only one image on event of onmouseover on div, I tried below but it display images of all the rows.

 $('div.test1').mouseover(function () {

            $('.PreviewImage').show();
        })

Answer 1

You can try this.

$('div.test1').mouseover(function () {
     //Hide all images which are visible.
     $('.PreviewImage:visible').hide();
     //On Mouse Over find the Image and show.
     $(this).find('.PreviewImage').show();
})

or you can try on if using jQuery version >= 1.6

$('[Id$=gvSearch]').on('mouseover','div.test1',function () {
     //Hide all images which are visible.
     $('.PreviewImage:visible').hide();
     //On Mouse Over find the Image and show.
     $(this).find('.PreviewImage').show();
})