how to give hover effect to DataList - css

Question

<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
how i can give hover effect to the items
i have used jquery but it is taking effect to the first item only
is there any way to give hover mouseover effects to individual items

Answer 1

You can use the :hover selector in CSS to the row class like so:
.row:hover {
/* styling */
}

Answer 2

With Jquery:
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
$(document).ready(function(){
$('.row').hover(function(){
$(this).css('background-color','yellow');
},function(){
$(this).css('background-color','transparent');
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>
With Css:
.row:hover {
background-color:yellow;
}
.row:hover {
background-color:yellow;
}
<ItemTemplate>
<div class="span3">
<div class="row">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl='<%# Eval("product_img") %>' BorderStyle="Outset" ImageAlign="Top" Width="250px" />
</div>
<div class="row" >
<b>product_name:</b>
<asp:Label ID="product_nameLabel" runat="server" Text='<%# Eval("product_name") %>' />
</div>
<div class="row">
<b>product_description:</b>
<asp:Label ID="product_descriptionLabel" runat="server" Text='<%# Eval("product_description") %>' />
</div>
<div class="row">
<b>product_price:</b>
<asp:Label ID="product_priceLabel" runat="server" Text='<%# Eval("product_price")%>' />
</div>
<br /><br /><br /><br />
</div>
</ItemTemplate>
<SelectedItemStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
</asp:DataList>