Anchor tags and hover

Forum Moderators: not2easy

Message Too Old, No Replies

Anchor tags and hover

Styling anchor tags with a: hover

Adam5000

9:36 pm on May 11, 2014 (gmt 0)

Greetings again all.

I'm a little confused about styling anchors.

I'm using a:hover as part of the styling for the anchors, and at this point, I'm putting the anchors inside paragraph tags.

<style type="text/css">
p
{
color: red;
}
a:hover
{
color: #999999;
}
</style>

<p class="anchor">
<a href="page_2.htm">
Go to page 2
</a>
</p>

The hover works with the above code, but when I style the anchor, the hover doesn't work. And I don't know what's up.

<a class="anchor" href="page_2.htm>

I'd like the anchor to have big red letters, with the hover working.

Help!

lucy24

11:01 pm on May 11, 2014 (gmt 0)

but when I style the anchor, the hover doesn't work

You forgot to show the example css, and it becomes crucial here.

The two pieces
a:hover
a.mystyle
mean that the browser has to decide what to do when confronted with a hover on <a class = "mystyle">. So for starters, make sure the css explicitly says
a.mystyle:hover
in addition to the styles for "hover" and "classname" alone.

not2easy

11:11 pm on May 11, 2014 (gmt 0)

In your example, the paragraphs are coded to be red, but there is no style applied to the a element so it is likely to be the browser default blue.

a
{
color: red;
font-weight: bold;
font-size: large;
}
will give you big bold red links with an underline unless you have a line for
text-decoration: none;

Be sure to add an exact copy for the a:hover element except for the color (and underline if you want it on hover) because if you specify a large font size for the a element and don't specify for a:hover it is not inherited and hover can cause your hovered links to resize to default text size and appear to jump.

Something like this would change just the color on hover:
a:hover
{
color: #999;
font-weight: bold;
font-size: large;
}

not2easy

11:50 pm on May 11, 2014 (gmt 0)

For over half an hour I have tried to edit my post (not a Forum issue, its my ISP) above to add the second part I had left off, I see that lucy24 addressed it and that my connection is not going to let me do anything online. You're in good hands, Adam5000.
I need to find something to do offline..

Adam5000

6:16 pm on May 15, 2014 (gmt 0)

I obviously don't know how something works (smile). I'm still having trouble with the a:hover code. The anchor text in question is on a page that's connected to two external style sheets. The first one is the main sheet, and it provides styling for all the pages. It has items on it like margin size, and font size, and all the pages are connected to it. And the second one is used to change the styling provided by the main sheet, for at most a group of ten pages. Below is the relevant code.

Main style sheet

a:hover
{
color: #777777;
}

Style sheet 2

a.exp
{
color: #ff0000;
}

And the page itself.

<html>
<head>

<title>Page one</title>

<link rel="stylesheet" type="text/css" href="1_main.css">

<link rel="stylesheet" type="text/css" href="2.css">

</head>

<body>

<p>
<a class="exp" href="page_2.htm">
Anchor text
</a>
<p>

</body>
</html>

The second style sheet works to style the anchor text, but with the above code, I lose the a:hover part.

Help!

lucy24

8:23 pm on May 15, 2014 (gmt 0)

That's where the

a.exp:hover

kicks in. You can edit the external css to say

a:hover, a.exp:hover {blahblah}

That makes it crystal clear. Or, if you want this one page to behave differently, add a document-specific css.

A later style overrides an earlier one, whether it's later in the same CSS or another stylesheet loaded later. Make sure that if a page has individual css, it looks like this:

<link rel = "stylesheet" blahblah
<link rel = "stylesheet" blahblah
<style type = "text/css"> *
blahblah
</style>

so the document-specific styles are always read after the shared ones.

I have tried to edit my post (not a Forum issue, its my ISP)

Aha, the truth comes out. It's not that you keep forgetting that you have moderatorial superpowers, it's that your ISP won't let you ;)

* Yes, yes, I know.

tangor

11:46 pm on May 15, 2014 (gmt 0)

Aha, the truth comes out. It's not that you keep forgetting that you have moderatorial superpowers, it's that your ISP won't let you ;)

Not quite fair! I was a mod here once... sometimes the Odd Gosh just gets in the way. :)

CSS attributes any element inherit unless over ridden by later specifications. It is not 1-3-2 and all works, it is 1-2-3.

Might want to look at the two external CSS and see what can be combined if desired for site wide use, else the secondary CSS is called only for those pages that need it.

(I opt for the former... too many stylesheets can make you crazy)

not2easy

12:14 am on May 16, 2014 (gmt 0)

it's that your ISP won't let you ;)

Seriously bad service here I just got back online today (sort of)I was booted off again this morning for 7 hours. Finally gave up and went back to the older, slower mobile modem and bought more time. Scammers could easily get me to buy internet via USPS at this point.

lucy24

2:18 am on May 16, 2014 (gmt 0)

too many stylesheets can make you crazy

I try to keep it to two. CMS are obviously the worst offenders; each "skin" or "theme" or whatever they call it means another CSS. The highest I can remember seeing is 18. (Eighteen. Really.)

I have a sharedstyles.css that covers anything used by the whole site, like colors and fonts, plus formatting for things like navigation footers that occur everywhere. Then each directory has a subsidiary stylesheet for things that happen only there. (This is obviously site-specific; I've essentially got eight micro-sites with slightly different "looks".) At the absolute most, three. And then document-specific styles if something only occurs on one page.

List stylesheets in order from most general to most specific, so document styles override subdirectory styles which override directory styles which override universal styles.

Adam5000

8:09 pm on May 16, 2014 (gmt 0)

Um Lu, I might need a little coaching here. You've squeezed all your styling into two sheets (three tops)? The program I use to check for broken links says I have 32 of them. And that sounds about right. But I thought I needed that many, because my site has over 300 pages, and it's diversified. Think of a hotel with 20 rooms, each with a different background, and font color.

lucy24

9:50 pm on May 16, 2014 (gmt 0)

I didn't mean two stylesheets total! I meant two per document. The total number would then depend on how many different "looks" you've got.

:: detour to check ::

On my primary personal site I've got a total of 17. But they're all on different paths, so no one file could ever use all 17 of 'em. I think I have one subdirectory that uses three; almost everything else is two.

tangor

11:25 pm on May 16, 2014 (gmt 0)

Think of a hotel with 20 rooms, each with a different background, and font color.

Please don't make me! (Think of that as it will make my poor head ache!) Most hotels don't offer that many options for the simple reason that not all guests/users wish to be that surprised/startled/offended/etc by color schemes extraordinary or unexpected. Having said that, there are perfectly proper times and places to do something outre... so, manage those style sheets!

Just strongly suggest that a:hover should be CONSISTENT throughout the website as your visitor will come to expect the same behavior the longer they are on your site and clicking on things.

lucy24

12:59 am on May 17, 2014 (gmt 0)

Ah, I forgot one.

a[class]:hover

That covers you fore and aft, because it specifies that even if your a element has an assigned class, you still want the hover to behave this way. Note that [class] isn't optional: the rule only applies to elements that in fact have a class. So the all-encompassing form is

a:hover, a[class]:hover {blahblah}

The only way to override a rule in this form is with a later rule that either says a[class]:hover again, or names a specific class.

The [class] part is the actual, literal wording of the rule. The {blahblah} part is whatever you choose to spell out.

Adam5000

11:44 pm on May 17, 2014 (gmt 0)

That was the code I needed Lu. a[class]:hover.

It basically says, even if I change the color of the anchor text by using the class property, keep the hover color the same. When I added that to the main sheet, the hover part on all the anchors started working again. You're a genius! I've got my anchor text jumping through hoops. Now, in typical fashion, a possible update is coming to mind. With the "That's where the a.exp:hover kicks in" (I didn't know about that code either), I'm thinking about color coordinating the hover color with the main color. Say if the main color is bright red, make the hover color a darker red. Food for thought.

Not2, sorry to hear about your connection problem. I'll put my fingers on my temples, concentrate, and send you some positive waves.

Thanks to everyone who helped on this issue. I'm currently working on some improvements, so it will be a little different later, but my website is open 24/7, and you're all invited. That includes you too Lu (smile).