Asked By
myron522
40 points
N/A
Posted on - 07/25/2011
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..
Help Needed for CSS scripting
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:
-
<style>
<!–
a:hover { color: #000; text-decoration: underline;}
–>
</style>
-
<style>
<!–
a:hover { color: #000; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 10px }
–>
</style>
-
<style>
<!–
a:hover { color: #000; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 10px; background-color: #CCC }
–>
</style>
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
Help Needed for CSS scripting
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.