9 Replies - 370 Views - Last Post: 05 March 2014 - 02:50 PM

#1 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Link states work once and then stop working

Posted 05 March 2014 - 11:34 AM

Hello Dream-in-Coders,

I'm having a simple problem with coding links. Hoping someone may be able to help.

I'm coding a link launch page using a linked CSS style sheet. The pages work fine.

On the link launch page, I've coded some simple links. On the separate CSS style sheet, I've styled the link the states for these links. The link state code appears to work fine in my text editor's simulator but when I test the page in my browsers, the link states work only once. When I activate a link and then return to the launch page, the link states no longer work.

Here's my code:
<!-- Here's the CSS styles from main.css -->

a.launchLink {
	display: block;
	font-family: Fontdiner Swanky;
	color: #FFFF00;
	text-align: center;
	text-decoration: none;
	font-size: 5em;
	-webkit-transition: all 200ms ease 0s;
	-moz-transition: all 200ms ease 0s;
	-ms-transition: all 200ms ease 0s;
	-o-transition: all 200ms ease 0s;
	transition: all 200ms ease 0s;
}
a.launchLink:hover {
	color: #FF6600 ;
}
a.launchLink:active {
	color:  #FF0000;
}
a.launchLink:visited {
	color: #FFFF00;
}

<!-- Here's the HTML code from index.php -->

   <section id="solidBox" > 
   <a  class="launchLink" href="metalflake_solid.php" tabindex="20" title="Solid Metal Flake" target="_top">SOLID!</a>
   </section>



Many Thanks in Advance,
Mick

This post has been edited by agent46: 05 March 2014 - 11:35 AM


Is This A Good Question/Topic? 0
  • +

Replies To: Link states work once and then stop working

#2 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 12:02 PM

I am not sure what your interpretation of a "link state" is?

If you mean the :link pseudo-class then you haven't included this in your css. This css would only apply until the link is visited.

These rules should also preferably be supplied in the order :link, :visited, :hover, :active (LVHA).

Otherwise, please describe what you mean by a "link state".

Added: If you don't want the :visited css to apply then remove it.

This post has been edited by andrewsw: 05 March 2014 - 12:05 PM

Was This Post Helpful? 0
  • +
  • -

#3 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Link states work once and then stop working

Posted 05 March 2014 - 12:19 PM

Hi Andrew,

Thanks for your reply. By "link state" I mean the event that occurs when I apply the cursor to the link. For example, the hover state is activated when I pass the cursor over the link. The active state is activated when I click the link. In this case, the event is a simple text color change.

So, I take it (from your reply) there's more to all this than what I've coded here. Could I trouble you for a link to a tutorial or article that breaks down the use of pseudo classes for these purposes?

Thanks,
Mick
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 12:33 PM

I can't find a tutorial on a quick search.

  • :link is for a-links, untouched
  • :visited is a link that has been visited
  • :hover is as the mouse is hovered over the link
  • :active is only, very briefly, as the link is clicked

You might search "css love hate" or "css lvha".
Was This Post Helpful? 1
  • +
  • -

#5 agent46  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 46
  • Joined: 10-January 14

Re: Link states work once and then stop working

Posted 05 March 2014 - 12:39 PM

Andrew,

Would you mind taking a look at the styling code I included in the OP? As best I could, I've set up the pseudo class styles as you indicate here, but am getting unexpected results. What do you think I'm missing?

Will do a search also.



Just found the solution. The order of the pseudo classes is key for correct functioning of the states:

a:link
a:visited
a:hover
a:active


Thanks for your help, Andrew.

Mick

This post has been edited by agent46: 05 March 2014 - 12:46 PM

Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 12:41 PM

Please try to describe the problem more clearly. What does it do and what should it do instead?
Was This Post Helpful? 0
  • +
  • -

#7 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 12:42 PM

Like andrewsw said, use the LOVE HATE method to style your links.
a:link { color: blue; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }


Set the visited selector color property to the same as your link selector color. Then when a link is clicked, it will set to the same color you originally wanted. Does this make sense?
Was This Post Helpful? 2
  • +
  • -

#8 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 01:50 PM

If you want them to use exactly the same css then you might as well combine them:
a:link, a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Glad you sorted anyway ;)
Was This Post Helpful? 0
  • +
  • -

#9 FerretHolmes  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 41
  • View blog
  • Posts: 167
  • Joined: 12-November 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 02:46 PM

View Postandrewsw, on 05 March 2014 - 03:50 PM, said:

If you want them to use exactly the same css then you might as well combine them:
a:link, a:visited { color: blue; }
a:hover { color: green; }
a:active { color: red; }

Glad you sorted anyway ;)/>

Twas' for the sake of clarity. :dangole:
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • say what now
  • member icon

Reputation: 6409
  • View blog
  • Posts: 25,904
  • Joined: 12-December 12

Re: Link states work once and then stop working

Posted 05 March 2014 - 02:50 PM

Quote

Twas' for the sake of clarity.

Yeah I know ;) I wasn't criticising, just adding :)
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1