Asp.net programming we consider all important topic for knowledge about controls,web Services, JSON, Ajax, database, and interview related Question. In this Asp.net and sql server tutorial blog we give many examples of jquery as like How Play YouTube Video in Your Asp.net Website by URL, How to Play YouTube Videos in Asp.net by using Jquery , Jquery Change div background on mouseover in asp.net , JQuery UI Datepicker (Calendar) etc.

Thursday, October 9, 2014

In asp.net by jquery change div text color on mouseover

Change text color of div element text on mouseover and mouse out:



In this Post we consider an example in which we want to change font color of given div tag at run time.
Before some time I face this type of Problem when i create my Project. And again many times we see type of Question in many web sites and forums.
Today we make an asp.net demo example and try to solve this Question. For this First we 

create a asp.net page and take three div tag with some text here.

                <div class="div" style="color: blue;">
                    Asp.net Application</div>
                <div class="div" style="color: blue;">
                    Asp.net web Aplication.</div>
                <div class="div" style="color: blue;">
                    Asp.net web site related tutorials.</div>

 Know we want to change the div fount color when we go the mouse pointer on the div.
if you want to change background color the check this Post div background color by Jquery,

Jquery function for change text color of div in asp.net:


        $(document).ready(function () {

            $('div').hover(
         function () {
             $(this).css({ "color": "red" });
         },
         function () {
             $(this).css({ "color": "blue" });
         }
     );

   });

Used Jquery for change text color:

Download Jquery fron here.

https://code.google.com/p/jqueryjs/downloads/detail?name=jquery-1.3.2.min.js"

jquery - Change text color on mouseover:

<%@ 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({ "color": "red" });
         },
         function () {
             $(this).css({ "color": "blue" });
         }
     );

        });

    </script>
    <style>
        .div
        {
            margin: 10px;
            padding: 12px;
            border: 2px solid #666;
            width: 218px;
            font-size: large;
        }
        .style1
        {
            color: #990000;
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td align="center">
                <h1 class="style1">
                    Change Font Color of DIV using jQuery</h1>
                <p>
                    Move mouse on any square below to see the result:</p>
                <div class="div" style="color: blue;">
                    Asp.net Application</div>
                <div class="div" style="color: blue;">
                    Asp.net web Aplication.</div>
                <div class="div" style="color: blue;">
                    Asp.net web site related tutorials.</div>
            </td>
        </tr>
    </table>   
</body>
</html> 

Text color change on mouseover by Jquery:


 
In asp.net by jquery change div text color on mouseover
 jquery change div text 

Asp.net Related Other Post:

No comments:

Post a Comment