Computer Science Canada

HELP : VERY SIMPLE QUESTION BUT NOT GETTING IT!:
Author:  hamza_saeed007 [ Wed Jan 05, 2005 5:12 pm ]
Post subject:  HELP : VERY SIMPLE QUESTION BUT NOT GETTING IT!:
hi ,

i just wanted to ask how can we create the shaded hover or mouseover effect . i.e. go to " http://music.msn.com/artist/default.aspx?artist=16074062&app=2 " rollooer or mouseover the name of the songs
and then see a grey shade that appears on the name of the song.

PLZ HELP.
THANKS
Author:  wtd [ Wed Jan 05, 2005 5:20 pm ]
Post subject:  Re: HELP : VERY SIMPLE QUESTION BUT NOT GETTING IT!:
You start with a bit of text in your HTML:

code:
Hello world!


Now, you make it a link:

code:
<a href="#">Hello world!</a>


Then you give the link an id:

code:
<a href="#" id="my-link">Hello world!</a>


Then you add a stylesheet:

code:
<style="text/css">

</style>

<a href="#" id="my-link">Hello world!</a>


Now, we offer a definition of the "my-link" id in the stylesheet:

code:
<style="text/css">
   a#my-link {
      /* text color */
      color: #000000;
      /* background color */
      background-color: #FFFFFF;
   }
</style>

<a href="#" id="my-link">Hello world!</a>


Now, we define properties for the hover version of the link:

code:
<style="text/css">
   a#my-link {
      /* text color */
      color: #000000;
      /* background color */
      background-color: #FFFFFF;
   }

   a#my-link:hover {
      background-color: #E8E8E8;
   }
</style>

<a href="#" id="my-link">Hello world!</a>


Done.

Read up on Cascadiang Style Sheets.

:


You can syndicate this boards posts using the file backend.php or view the topic map using sitemap.php.

Terms of Use | Privacy Policy