|
Web Development & Graphic Design Problem Solving for Graphic Design, PHP, ASP, Perl, MySQL, SQL, XML, HTML issues |
![]() |
|
Topic Tools |
#1
|
|||
|
|||
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 |
#2
|
|||
|
|||
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. |
#3
|
|||
|
|||
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. |
#4
|
|||
|
|||
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> 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; } 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;} Without seeing how your page is coded, this is the best I can do. |
#5
|
|||
|
|||
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 |
#6
|
|||
|
|||
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.
|
#7
|
|||
|
|||
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. |
![]() |
Bookmarks |
«
Previous Topic
|
Next Topic
»
Topic Tools | |
|
|
![]() |
||||
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 07:53 PM.