how to give hover effect to DataList

问题

                        <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

回答1:

You can use the :hover selector in CSS to the row class like so:

.row:hover {
   /* styling */
}

回答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>

来源：https://stackoverflow.com/questions/45051787/how-to-give-hover-effect-to-datalist