How to put hover in certain links?

I need help on how to put hover in a certain links in dreamweaver.. Coz when i put hover all the links have the same rollover... i want rollover just in the navigation bar.. please help..

 

#navigation a:hover {
    color: green;
    }
=========
<ul id="navigation">
  <li><a href="some.html">some page</a></li>
</ul>

Code (markup):

Will affect only the links within the navigation list.

cheers,

gary

 

Or this, simple assigning of class to a link..

 

ok thanks guys. i will try that out..

 

I'd avoid adding classes to the list items and the links in them if you have the ID assigned to the list itself. You can just reference the links directly from the list itself, as Gary was kind enough to show you.

Do that, and your dialup and mobile users will thank you .

 

And you'll thank yourself later when you will changing the layout digging in old code...

Trust me, use this priority:
1) tags (a, span) - and sublevel tags (ul li {})
2) classes (.link .box)
3) IDs (#header, #leftdiv)

 

I wouldn't even use names like "leftdiv" either. What if one day your "leftdiv" finds itself on the right side of the layout?

 

yea, just an example

 

I know. That post was for the benefit of those who may not know better .

 

clyde66's question was related to limiting the hover effect to certain links. Gary has given an example which will work, however we don't necessarily need to create a list for a link as per his sample code. I would simply assign a class to the link that needs a special hover effect. Making the link part of a list is a particular situation, I would not give it as as sample for the thread starter's need.. Just to make things as easy as possible

 

Hi Clive,

Since the OP said the links were in a nav bar, "i want rollover just in the navigation bar.. ", I worked on the inference that it was a menu, by definition, a list. If the OP were to give us a more specific description of the usage, we could offer a possibly different solution.

cheers,

gary

 

Agree here. An URL would be a best direction for us to get a better idea of what the guy is looking for.
Without having that, guessing is the way it usually goes
I hope he picked up what's best for him.

 

hi guys thanks for the advices.. i have a new questions about hover.. How can i put hover like this www.sherlockrecords.com in the navigation menu.. Like theres a link then when you point the cursor there theres an image appearing in the background of the link.. please help

 

In that case it is exactly the same, only instead of specifying "color" to change the text color inside of the hover style use "background-color".

 

To specify a background color, just do this:

a:hover {
    background: #F0F;
}

Code (markup):

And for background images, just replace background-color with background-image and a URL to the image.

a:hover {
    background: url('image.jpg') top left no-repeat; /* you can also use repeat-x to tile it horizontally or repeat-y to tile it vertically; for both, you can simply omit no-repeat */
}

Code (markup):

Of course, in both cases, you'll have to reference WHICH links you want. The best way to do this is to look at the parent element, and see if it has a class or ID in it (or one of its ancestors).

For example, if your menu looks like this:

<ul id="menu">
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
	<li><a href="#">Menu Item</a></li>
</ul>

Code (markup):

Then you would target all the links in that list (and its list items) like so:

#menu a {  /* this will affect ALL link states */
    /* CSS styles here */
}

#menu a:hover { /* just affects the hover state */
    /* CSS styles here */
}

Code (markup):