Enjoy with Hover

Jan 22, 2009 Labels: , 0 comments

What is Hover anyway?
Hover is the effect/changed that occur when the cursor appointing to the Object (Text/link/Image....). to run this hover just using CSS (Cascading Style Sheets) which call each other...

Are you confusing what's the meaning with? I think so....because only that words in my brain.. For more detail, let's see the example below ( please point the cursor to the following example) :

---> example-1

Love for the Spirit is the same with the Food body..
If you eat too much it will be dangerous for you .... And when you leave, it will kill you...


---> example-2
















To make that example above, just simply way to do it :

--> in EXAMPLE-1 :

1. Log in to Blogspot
2. check the Expand Widget Templates
3. Look for ]]></b:skin>
4. Put the code below above of the code ]]></b:skin>

.codejovie {
padding: 10px;
margin top:5px;
margin-bottom:5px;
margin-left:40px;
margin-right:50px;
color: #ffffff;
background: #336699;
border-top: 2px solid #ffcccc;
border-right: 2px solid #99cccc;
border-bottom: 2px solid #99cccc;
border-left: 2px solid #ffcccc;
}

.codejovie:hover {
color:#336699;
background: #eeeeee;
border-top: 4px solid #99cccc;
border-right: 4px solid #ffcccc;
border-bottom: 4px solid #ffcccc;
border-left: 4px solid #99cccc;
}

5. when you want to post, put this code <div class="codejovie"> before the text, and this code </div> after the text....


-->> in EXAMPLE-2, It would be the same thing with EXAMPLE-1.., just put the code below before the code : ]]></b:skin>


.jovie{
background:#ffffff url('URL Image')no-repeat center;
}

.jovie:hover{
background:#ffffff url('URL Image')no-repeat center;
}

When you want to post the article just put this code : <div class="jovie"> before the text, and </div> after the text....


--> Hover in CSS is call each other
.a {

}

would be called by :

.a:hover{

}

then, they would be called with this code <div class="a"> before text, and </div> the text text....

Info* : we can adjust the CSS code between "{" "}

Enjoy ;)

Subscribe to Le BloG De JoVie by Email

Posted by JoVie at Thursday, January 22, 2009

Links to this post

What next?

Related Posts by Categories



Post a Comment

Subscribe to: Post Comments (Atom)