Help Needed for CSS scripting

Asked By 40 points N/A Posted on -
qa-featured

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..

SHARE
Best Answer by Harpe byers
Answered By 0 points N/A #88517

Help Needed for CSS scripting

qa-featured

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:

  1. <style>
    <!–
    a:hover { color: #000; text-decoration: underline;}
    –>
    </style>
  2. <style>
    <!–
    a:hover { color: #000; text-decoration: underline; font-family: Arial, Helvetica, sans-serif; font-size: 10px }
    –>
    </style>
  3. <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

Best Answer
Best Answer
Answered By 10 points N/A #88519

Help Needed for CSS scripting

qa-featured

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.

Answered By 0 points N/A #88521

Help Needed for CSS scripting

qa-featured

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

 

Related Questions