Jquery Change div background on mouseover in asp.net

-

In Asp.net jquery-change div background Image on mouseover:



In this Post we will Try to change a background of a div when the user rollsovers it. We want to change font color of given div tag at run time when go to mouse on div and then again change when mouse left the div tag.

 If you want to :

Change background image on mouse hover with jQuery:

Use this script function in head section.
<script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $('div').hover(
         function () {
             $(this).css({ "background-image": "url('image2.jpg')" });
         },
         function () {
             $(this).css({ "background-image": "url('image1.jpg')" });
         }
     );

        });

    </script> 

jQuery background-image change on hover (css code):

<style>
        .div
        {
            margin: 10px;
            padding: 12px;
            border: 2px solid #666;
            width: 218px;
            font-size: large;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
        .style2
        {
            width: 874px;
        }
        .main
        {
        }
    </style>

Asp.net -Change background on hover :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="divExample.aspx.cs" Inherits="divExample" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Jquery Change fount color</title>
    <%--<script type="text/javascript"
   src="https://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js"></script>--%>
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" language="javascript">

        $(document).ready(function () {

            $('div').hover(
         function () {
             $(this).css({ "background-image": "url('image2.jpg')" });
         },
         function () {
             $(this).css({ "background-image": "url('image1.jpg')" });
         }
     );

        });

    </script>
    <style>
        .div
        {
            margin: 10px;
            padding: 12px;
            border: 2px solid #666;
            width: 218px;
            font-size: large;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
        .style2
        {
            width: 874px;
        }
        .main
        {
        }
    </style>
</head>
<body>

<h1 class="style1">
                    Change bg Image of DIV using jQuery on move go to Image</h1>
                <p>
                    Move mouse on any square below to see the result:</p>
    <table>
        <tr>
            <td>
               
                <div class="div" style="color: blue; background-image: url('image1.jpg'); width: 200px;
                    height: 160px">
                </div>
            </td>
            <td>
                <div class="div" style="color: blue; background-image: url('image1.jpg'); width: 200px;
                    height: 160px;">
                </div>
            </td>
            <td>
                <div class="div" style="color: blue; background-image: url('image1.jpg'); width: 200px;
                    height: 160px">
                    &nbsp;</div>
            </td>
        </tr>
    </table>
   
</body>
</html>



Asp.net Related Other Post:




Comments

Post a Comment