Go Back   Cyber Tech Help Support Forums > Software > Web Development & Graphic Design

Notices

Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues

Reply
 
Topic Tools
  #1  
Old June 27th, 2011, 07:39 PM
Brian M Brian M is offline
Senior Member
 
Join Date: Apr 2004
Posts: 230
Links on hover

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
Reply With Quote
  #2  
Old June 27th, 2011, 10:40 PM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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.
Reply With Quote
  #3  
Old June 28th, 2011, 09:01 AM
Brian M Brian M is offline
Senior Member
 
Join Date: Apr 2004
Posts: 230
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.
Reply With Quote
  #4  
Old June 28th, 2011, 11:23 AM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
EVERYTHING, can be styled. But some things need to be called out with a selector (class or id).

If you have code like this....

Code:
<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...

Code:
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...

Code:
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.
Reply With Quote
  #5  
Old June 28th, 2011, 01:15 PM
Brian M Brian M is offline
Senior Member
 
Join Date: Apr 2004
Posts: 230
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
Reply With Quote
  #6  
Old June 28th, 2011, 08:00 PM
Buzz Buzz is offline
Cyber Tech Help Moderator
 
Join Date: Sep 2000
O/S: MacOS
Location: Oregon, USA
Posts: 4,005
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.
Reply With Quote
  #7  
Old June 29th, 2011, 12:50 AM
Brian M Brian M is offline
Senior Member
 
Join Date: Apr 2004
Posts: 230
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.
Reply With Quote
Reply

Bookmarks

Topic Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump

Similar Topics
Topic Topic Starter Forum Replies Last Post
Hover Click Feature lufbra Windows 10 8 October 6th, 2022 03:05 AM
hover button problem in IE chadi Web Development & Graphic Design 9 September 11th, 2007 02:04 AM
Flash Hover dudeking Web Development & Graphic Design 1 February 7th, 2007 04:12 PM
Hover jarred1234 Windows 95 1 January 12th, 2006 03:40 PM
Hover Cat Bad Dog Jokes Forum 5 December 18th, 2004 07:47 AM


All times are GMT +1. The time now is 09:07 PM.