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
Go To Solution
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

About Anne Pitt
Questions
0
Answers
4
Best Answers
2
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.

About Harpe byers
Questions
3
Answers
202
Best Answers
91
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

 

About Maverick Aabel
Questions
3
Answers
54
Best Answers
26

Winamp and WMP 12 cannot play music

Previous

Flash disk cannot be formatted

Next

Related Questions