Announcement:

  Hello, We Changed Our Cloth, How It Is Looking? Leave Your Feedback At Our Page.

Saturday, April 13, 2013

How To Change CSS .class Of A DIV On Mouse Hover?

This Article Was Live On: Saturday, April 13, 2013 And Till Now Have2 comments.
How To Change CSS .class Of A DIV On Hover?

ToDay The Question Is That How To Change CSS .class Of A DIV On Mouse Over Or Hover Using DOM Effect Without JavaScript Or J-Query? The Ans Is Simpley Given Below. This Is Also Questioned By Many Friends So I Am Here Again, If You Have To CSS .class And Want To Change On Movse Hove r Then It Will Automatically Pick Up Second .class CSS Code And Start Displaying But On Again Mouse Out, It Will Be Back On The First .class And Start Displaying It. This Is Best For Idealogical Designer Or Can Be Used For New Style Gadget And Widget. You Have Full Right To Change The .class SIZE, COLORS, Fonts, Padding, POSITION And etc. It's Pure DOM Effect Not Within The <script> Tag Or Even $document Tag... So If You Want It, Just Add It Now With Easy Setps.


Features:

1.) CSS Class Of A DIV Will Be Change On Mouse Ove.
2.) Simple And Awesome Code.
3.) DOM Effect.
4.) No J-Query Or JavaScript.
5.) Quick To Load And Easy To Use.
6.) It Will Be Back On Mouse Out.
7.) Fully Customizable DIV CSS.
8.) You Can Add Any Data In The DIV.
9.) You Can Add Unlimited DIVs.
10.) You Can Add It To Blog Post, Blog Template, Blog Widget Or In Website Or Ant Web-Place...

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Layout".
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.

<style type="text/css">
.exe-mainclass{background-color:#ff0000;width:100px;height:100px;position:fixed;left:0px;top:0px;}
.exe-hoverclass{background-color:#0000ff;width:100px;height:100px;position:fixed;left:0px;top:0px;} </style>
<div class="exe-mainclass" onmouseover="this.className='exe-hoverclass'" onmouseout="this.className='exe-mainclass'">
+++Your DIV Data+++
</div>

Customization:

1.) Change exe-mainclass CSS To Your Desire One.
2.) Change exe-hoverclass CSS To Your Desire One.
3.) Change +++Your DIV Data+++ With Your Desired Data.
4.) Save And Done.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



2 comments :

  1. Very nicely written post it contains useful information for me.Now you make it easy for me to understand and implement the concept. Thank you for the post.

    ReplyDelete
    Replies
    1. Thanks For Liking And Leaving Your Views About Us, Be With Us To Get More.

      Delete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.