I created a CSS script but how ever need to add a padding around the text such that the width changes on Mouse Over event.
i have created the JavaScript however am unsuccessful in creating the CSS file.
I have attached the script below.
Any help from your side would be appreciated..
Hi,
In Cascading Style Sheet (CSS) a:hover is used to give the text decoration required when mouse comes over.
a:hover can contain many text decorations.
Example:
But this only works for the links. CSS don’t have such thing for normal text. You need to use javascript for this.
Thanks,
Anne
Hi Myron,
You don’t need to install JavaScript.
Follow these steps –
1. Please open a text editor say Notepad.
2. Type (or simply copy paste) following code to create a blue square of 250 pixels
<html>
<body>
<style>
.block { display: block; height: 250px; width: 250px; background-color: blue; }
</style>
<div class="block">
</div>
</body>
</html>
3. Close and save the document at desktop with name that you like following .html extension.
4. Open the file from the desktop in a web browser (Simply drag and drop in a browser and you will see the blue square)
5. Open the Notepad again and enter the following source code right before – </style> tag.
.block:hover { height:400px; width: 400px; }
which is programmed to resize blue square to 400 pixels when the user hovers over the mouse.
Hi,
For adding a style and selecting a link when the mouse will get over it, you need to add a simple CSS :hover selector.
Example:
a:hover
{
background-color:yellow;
}
If you try this code, you will see that the background color of your link will change to yellow.
For adding more effects you can use the :link, :visited, :hover, :active and other selectors.
Good luck codding,
Aabel
