Css Hover Basic

CSS hover property:

In css hover property is used for making a great navigation menu. Changing text is also made by hover property. Speacially  hover hide something and display other on web pages. If it is not clear now it may be clear after an example. Before go to example you need to know what is the meaning of hover?  The same word of hover is delay, be behind, hover, stop, loiter, defer. From the meaning you can realize something about hover. css hover works for hide something and display other something.

Look at the following html doc. This is a simply a doc. I am going to use hover on it.

Example:

<html>

<head>

<style type="text/css">

p{color:blue; font-family:verinda; font-size:30px;}

</style>

</head>

<p>This is a paragraph.</p>

</html>

Output:  css hover page
I want to make the text color red while the cursor over on the text.  Now look at the following doc cod.

<html>

<head>

<style type="text/css">

p{color:blue; font-family:verinda; font-size:30px;}

p:hover{color:red;}

</style>

</head>

<p>This is a paragraph.</p>

</html>

Output:  css hover example
Now I am going to change font and size of text. Just need to change the cod inside selector:hover property.

<html>

<head>

<style type="text/css">

p{color:blue; font-family:verinda; font-size:30px;}

p:hover{color:red; font-family:arial; font-size:40px}

</style>

</head>

<p>This is a paragraph.</p>

</html>

Output: css hover example

When your cursor goes over the paragraph the paragraph text change from verinda to arial, and also color become red , font size transform to 40px to 30 px. This is a simple tips of css hover.

Now in the following I am going to show you how to make a box over the paragraph by hover. For learn about css border follow css border article. I use border property for making border into the paragraph.

Example:

<html>

<head>

<style type="text/css">

p{color:blue; font-family:verinda; font-size:30px;}

p:hover{color:red; font-family:arial; font-size:40px;border:1px solid #0000ff; width:400px;}

</style>

</head>

<p>This is a paragraph.</p>

</html>

Output:css hover example

The border property used for making a border an d the width property indicate the width of the border. This is the css hover basic knowledge.

Roy Jemee is a professional Blogger. Apart of blogging he likes to play with mathematics. He knows Blogging, Wordpress, PHP, javascript , SEO and some other.