Dreevoo.com | Online Learning and Knowledge Sharing
 
Home | Programs | Adobe Dreamweaver | Navigation | Change the color on mouse rollover using CSS
Guest
Click to view your profile
Topics
Programs
Languages
Recipes
Home
Shortcuts
 
 

Change the color on mouse rollover using CSS

Why using an image if you can use CSS style in a way the button color changes when you run a pointer over it.

 
  Author: NikMan | Version: CS3 | 29th March 2013 |  
 
 
1.
 

Crate a new HTML page.

You can of course use the existing one, but a bit of improvistaion will be needed, which we are glad to give you on our forum.

 
 
2.
 

Let's begin in a simple way.

Click the Table icon to crate a table.

 
 
3.
 

Choose and enter same things as I did and click OK.

 
 
4.
 

Two cell table has been created, enter some text in each of them (see picture).

Click Code, enable the Code view.

 
 
5.
 

Position yourself under the tag <head>.

 
 
6.
 

Enter the following two CSS styles:

<style type="text/css">

.menu {background-color: #a3c7dc; }
.menu:hover {background-color: #81acca; }

</style>

 
 
7.
 

Now got to where your first table cell is located (see picture).

 
 
8.
 

In the td tag add class="menu" (see picture).

 
 
9.
 

Do the same thing for another cell/button (see picture).

 
 
10.
 

Save your document and see what it does.

Press F12 while in Dreamweaver to launch the page you just did in your default web browser.

 
 
 
   
  Please login to post a comment
  Click to open user profile  
McReady, 1st Apr 2013, 1:30 AM
Thank you for this tutorial. It really helped.
 
   
 
 
online learning made for people
Dreevoo.com | CONTRIBUTE | FORUM | INFO