Forums » .NET » .NET »

Jqyery button


Posted Date: 17 Mar 2011      Posted By:: rohit     Member Level: Bronze    Member Rank: 5615     Points: 1   Responses: 2



jqyery buttons tutorials. i want if my mouse go over on button then button color change otherwise not.



Responses

#596406    Author: Shekar.Y      Member Level: Gold      Member Rank: 102     Date: 18/Mar/2011   Rating: 2 out of 52 out of 5     Points: 3

You can use the onmouseover, onmouseout javascript events for handling the such scenarios.

Refer to the following link which explains about change the background color of an achortag using onmouseover.

http://www.daniweb.com/web-development/web-design/html-and-css/code/216435

Hope this could help you.

Thanks
Shekar.Y


 
#596453    Author: Karthick NS      Member Level: Bronze      Member Rank: 4367     Date: 18/Mar/2011   Rating: 2 out of 52 out of 5     Points: 4

Hi rohit,

Need not to write jquery codings for this. Use CSS files you can change the color of the button.

For ex:

<html>
<head>
<style type="text/css">
.btnOk{
color: #000;
background: #ccc;
width: 163px;
heigt: 63px;
}

.btnOk:hover{
color: #fff;
background: #000;
}

</style>
</head>
<body>
<input class="btnOk" type="submit" value="Ok" />
<input />
</body>
</html>

But Internet Explorer 6 doesn't support hover class of CSS.

if you want in jquery,
<style>
.hoverButton{
background: #ccc;
}
.normalButton{
background: #000;
}
</style>

<script>
$("#btnOk").mouseover(function(event){
$("#btnOk").removeClass( "normalButton" );
$("#btnOk").addClass( "hoverButton" );
});

$("#btnOk").mouseout(function(event){
$("#btnOk").removeClass( "hoverButton" );
$("#btnOk").addClass( "normalButton" );
});
</script>
Thanks & Regards,
Karthick NS


 
Post Reply

 This thread is locked for new responses. Please post your comments and questions as a separate thread.
If required, refer to the URL of this page in your new post.



Return to Discussion Forum
Start new thread

Subscribe to Subscribers
Active Members
Today
    Last 7 Daysmore...

    Awards & Gifts
    Talk to Webmaster Tony John

    Online Members

    Phagu Mahato
    More...
    Copyright © SpiderWorks Technologies Pvt Ltd., Kochi, India