How to highlight datalist item on mouseover in asp.net c#

In this article, we will discuss that how to highlight datalist item on mouse over in asp.net c#. We can highlight the datalist item with zoom in and zoom out.
Design:-




Source Code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="highlightdatalist.aspx.cs"
    Inherits=" highlightdatalist" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title></title>
    <style>
        html, html a
        {
            -webkit-font-smoothing: antialiased;
            text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
        }
       
        body
        {
            font-family: 'Open Sans' , sans-serif;
            background: #e2e2e2;
        }
       
        #plans, #plans ul, #plans ul li
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
       
        #pricePlans:after
        {


            content: '';
            display: table;
            clear: both;
        }
       
        #pricePlans
        {
            zoom: 1;
        }
       
        #pricePlans
        {
            max-width: 69em;
            margin: 0 auto;
        }
       
        #pricePlans #plans .plan
        {
            background: #fff;
            float: left;
            width: 100%;
            text-align: center;
            border-radius: 5px;
            margin: 0 0 20px 0;
            -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.1);
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        
        .planContainer .title h2
        {
            font-size: 2.125em;
            font-weight: 300;
            color: #3e4f6a;
            margin: 0;
            padding: .6em 0;
        }
       
        .planContainer .title h2.bestPlanTitle
        {
            background: #3e4f6a;
            background: -webkit-linear-gradient(top, #475975, #364761);
            background: -moz-linear-gradient(top, #475975, #364761);
            background: -o-linear-gradient(top, #475975, #364761);
            background: -ms-linear-gradient(top, #475975, #364761);
            background: linear-gradient(top, #475975, #364761);
            color: #fff;
            border-radius: 5px 5px 0 0;
        }
       
       
        .planContainer .price p
        {
            background: #3e4f6a;
            background: -webkit-linear-gradient(top, #475975, #364761);
            background: -moz-linear-gradient(top, #475975, #364761);
            background: -o-linear-gradient(top, #475975, #364761);
            background: -ms-linear-gradient(top, #475975, #364761);
            background: linear-gradient(top, #475975, #364761);
            color: #fff;
            font-size: 1.2em;
            font-weight: 700;
            height: 2.6em;
            line-height: 2.6em;
            margin: 0 0 1em;
        }
       
        .planContainer .price p.bestPlanPrice
        {
            background: #f7814d;
        }
       
        .planContainer .price p span
        {
            color: #8394ae;
        }
       
        .planContainer .options
        {
            margin-top: 10em;
        }
       
        .planContainer .options li
        {
            font-weight: 700;
            color: #364762;
            line-height: 2.5;
        }
       
        .planContainer .options li span
        {


            font-weight: 400;
            color: #979797;
        }
       
        .planContainer .button a
        {
            text-transform: uppercase;
            text-decoration: none;
            color: #3e4f6a;
            font-weight: 700;
            letter-spacing: 3px;
            line-height: 2.8em;
            border: 2px solid #3e4f6a;
            display: inline-block;
            width: 80%;
            height: 2.8em;
            border-radius: 4px;
            margin: 1.5em 0 1.8em;
        }
       
        .planContainer .button a.bestPlanButton
        {
            color: #fff;
            background: #f7814d;
            border: 2px solid #f7814d;
        }
       
        #credits
        {
            text-align: center;
            font-size: .8em;
            font-style: italic;
            color: #777;
        }
       
        #credits a
        {
            color: #333;
        }
       
        #credits a:hover
        {
            text-decoration: none;
        }
       
        @media screen and (min-width: 481px) and (max-width: 768px)
        {
       
            #pricePlans #plans .plan
            {
                width: 49%;
                margin: 0 2% 20px 0;
            }
       
            #pricePlans #plans > li:nth-child(2n)
            {
                margin-right: 0;
            }
       
        }
       
        @media screen and (min-width: 769px) and (max-width: 1024px)
        {
       
            #pricePlans #plans .plan
            {
                width: 49%;
                margin: 0 2% 20px 0;
            }
       
            #pricePlans #plans > li:nth-child(2n)
            {
                margin-right: 0;
            }
       
        }
       
        @media screen and (min-width: 1025px)
        {
       
            #pricePlans
            {
                margin: 2em auto;
            }
       
            #pricePlans #plans .plan
            {
                width: on:;
                margin: 0 1.33% 20px 0;
                -webkit-transition: all .25s;
                -moz-transition: all .25s;
                -ms-transition: all .25s;
                -o-transition: all .25s;
                transition: all .25s;
            }
       
            #pricePlans #plans > li:last-child
            {
                margin-right: 0;
            }
       
            #pricePlans #plans .plan:hover
            {
                -webkit-transform: scale(1.04);
                -moz-transform: scale(1.04);
                -ms-transform: scale(1.04);
                -o-transform: scale(1.04);
                transform: scale(1.04);
            }
       
            .planContainer .button a
            {
                -webkit-transition: all .25s;
                -moz-transition: all .25s;
                -ms-transition: all .25s;
                -o-transition: all .25s;
                transition: all .25s;
            }
       
            .planContainer .button a:hover
            {
                background: #3e4f6a;
                color: #fff;
            }
       
            .planContainer .button a.bestPlanButton:hover
            {
                background: #ff9c70;
                border: 2px solid #ff9c70;
            }
       
        }
    </style>
</head>
<body>
    <div>
        <asp:DataList ID="DataList1" runat="server" Font-Names="Verdana" Font-Size="Small"
            RepeatColumns="3" RepeatDirection="Horizontal" Width="600px">
            <ItemStyle ForeColor="Black" />
            <ItemTemplate>
                <div id="pricePlans">
                    <ul id="plans">
                        <li class="plan">
                            <ul class="planContainer">
                                <li class="title">
                                    <h2>
                                        <asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label></h2>
                                </li>
                                <li class="title">
                                    <asp:Image ID="imgPhoto" runat="server" Width="100px" Height="100px" ImageUrl='<%# Bind("image_path") %>' />
                                </li>
                                <li>
                                    <ul class="options">
                                        <li><span>
                                            <asp:Label ID="lblCName" runat="server" Text='<%# Bind("Name") %>'></asp:Label></span></li>
                                        <li><span>
                                            <asp:Label ID="lblName" runat="server" Text='<%# Bind("Birthday") %>'></asp:Label></span></li>
                                        <li><span>
                                            <asp:Label ID="lblCity" runat="server" Text=' <%# Bind("Contact_number") %>'></asp:Label></span></li>
                                    </ul>
                                </li>
                                <li class="button"><a href="#">Details</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </ItemTemplate>
        </asp:DataList>
    </div>
</body>
</html>


Code behind(c#):-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;

public partial class highlightdatalist : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            BindDatalist();
        }

    }

    protected void BindDatalist()
    {
        SqlConnection con = new SqlConnection("Data Source=NEERAJ-PC;Initial Catalog=CodeSolution;Persist Security Info=True;User ID=sa; password=12345678");
        con.Open();
        SqlCommand cmdImageupload = new SqlCommand("Select * from tbl_record ", con);
        SqlDataAdapter daImageupload = new SqlDataAdapter(cmdImageupload);
        SqlDataAdapter da = new SqlDataAdapter(cmdImageupload);
        DataTable dt = new DataTable();
        da.Fill(dt);

        DataList1.DataSource = dt;
        DataList1.DataBind();


    }
}

  
Out-Put:-



How to highlight datalist item on mouseover in asp.net c# How to highlight datalist item on mouseover in asp.net c# Reviewed by NEERAJ SRIVASTAVA on 3:57:00 PM Rating: 5

No comments:

Powered by Blogger.