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.
Table of Contents
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.
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.
Thanks For Liking And Leaving Your Views About Us, Be With Us To Get More.