Links on hover

[Brian M]

I have certain attributes set for links on the site navigation menu but I don't want them to apply to all other site links.
The Gallery contains thumbnail photos that link to the full size photo and no hover attributes are required.
Can you tell me the CSS class or id code required to separate the two actions?

The CSS for menu links on hover is currently:
a:hover { color: #990000; background-color:#FFFFFF; border:solid 1px #000000;}
On the dark menu background this shows up quite well.

Thanks in advance,
Brian

[Buzz]

You have to target the links separately.

You'll need a class (or id) for each area of links. The best practice is if you have one specific area of links you want to appear differently, apply a class to those links, then style that class.

You haven't provided enough information for me to show you any specific code examples.

[Brian M]

Thanks Scott,

I really don't know what other info I can supply.
Any and all text links require CSS styling but the photo links do not.
It's the border and background on hover that are causing the problem with photos,
so I may have to abandon that idea and leave it at nothing more than a text color change.

[Buzz]

EVERYTHING, can be styled. But some things need to be called out with a selector (class or id).

If you have code like this....

<p>This is a paragraph with an <a href="#">internal link</a> in it. I added additional text simply to fill out the paragraph. This text is unimportant and merely used for placement. If you've read this far, you must not believe me. This text doesn't matter. It's simply "filler" text to add an <a href="#">internal link</a> and show the code. So stop reading now.</p>

<div class="thumbnail">
<a href="#"><img src="path/to/image.jpg" width="100" height="100" alt="thumbnail image" border="0" /></a>
</div>

<div class="thumbnail">
<a href="#"><img src="path/to/image.jpg" width="100" height="100" alt="thumbnail image" border="0" /></a>
</div>

<div class="thumbnail">
<a href="#"><img src="path/to/image.jpg" width="100" height="100" alt="thumbnail image" border="0" /></a>
</div>

That has all straight anchor tags. So if your CSS looks like this...

a:link, a:visited {
    color: #a00;
    font-weight: bold;
    text-decoration: strikethrough; }

a:hover,a:active,a:focus {
    color: #f00;
    font-weight: normal;
    text-decoration: overline; }

Then all links, including those for the images will be red with a strikethough line and then turn yellow with an overline when you hover over them.

In order to NOT style the anchor tags within the thumbnail divs, you have to specifically target those anchors like so...

a:link, a:visited {
    color: #a00;
    font-weight: bold;
    text-decoration: strikethrough; }

a:hover,a:active,a:focus {
    color: #f00;
    font-weight: normal;
    text-decoration: overline; }

.thumbmail a:link, .thumbnail a:visited {
    color: #f00;
    font-weight: normal;
    text-decoration: none; 
    background: #009;}

.thumbmail a:hover, .thumbnail a:active, .thumbnail a:focus {
    color: #f00;
    font-weight: normal;
    text-decoration: none; 
    background: #333;}

This way you've got specific CSS to style only the anchors which appear inside a div with the class of ".thumbnail".

Without seeing how your page is coded, this is the best I can do.

[Brian M]

Thanks again,

This looks like the answer I've been looking for.
I knew it had to be something along those lines, but I just couldn't see it.
I'll put it to the test this evening.

(I have to admit a:focus is new to me and I still don't fully understand it.)

Cheers,
Brian

[Buzz]

Focus is used on elements that accept keyboard input. So if a user is using tab to cycle through input items on a page (usually text inputs) the anchors highlight as if the mouse is rolling over them when they are tabbed to. It's not a critical item. Just adds a bit of flair when a user is hitting the tab key.

[Brian M]

Discovered it was the 1px border on hover that was causing the problem.
So I've taken the easy option and removed it.

Next task is to restyle the horizontal menu with tabs .......

Thanks again Scott.