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,
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:
 |
| jquery change div text |
Asp.net Related Other Post:
- Upload multiple by one asp.net fileupload control using jQuery
- Asp.net TextBox OnTextChanged Event
- Adding Dynamic Rows in ASP.Net GridView Control with Textbox
- Create Dynamic Rows in ASP.Net GridView Control with TextBoxes
- How to create master page in asp net c#
- Cookies,how to make Cookies in asp.net with C#.
- Print pdf file in asp.net by C sharp
- How to Bind Gridview Form database.
- Show gridview Row Details.
- Templatefield in gridview
- Introduction of Asp.net grid view Control.
- Example of Templatefield in gridview .
- Example of DropDownList inside GridView
- Check box in ASP.NET GridView
- Ckeck box list example using javascript in grid.
- Check box in ASP.NET GridView
- Show grid view row details in to tooltip.
- How to Bind Gridview Form database.
- Show gridview Row Details And Give Example.
- Example of Templatefield in asp.net gridview.
- Example of DropDownList inside GridView control
- Introduction of Asp.net grid view Control.
- Example of C# for Bind Data to asp.net Textbox inside gridview control
- Bind Data to asp.net textbox control in inside of gridview Using C# Example
Comments
Post a Comment