2 Replies - 947 Views - Last Post: 18 March 2013 - 07:02 AM

#1 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Setting a link "highlighted"

Posted 18 March 2013 - 06:40 AM

Hi all,

I have a group of links that exhibit a certain behavior when hovered over, and in certain situations, they need to keep that behavior after they are selected. Here's what my CSS currently looks like:

/* Left alignment in menu bar. */
.menubar_float_left {
	float: left;
}

/* The menu bar's text. */
.menubar_text {
	font-weight:   bold;
}

/* The menu bar's default link text. */
.menubar_text a:link, a:visited {
	background:      #003366;
	color:           #99CCFF;
}

/* The menu bar's link text when selected. */
.menubar_text a:hover {
	background:      #5CBF3B;
	color:           #FFFFFF;



So, to be very clear -- I have a menu bar whose links are styled to be bold. When the link is just displayed, or if it's been visited, it needs to look a certain way. If the user hovers over the link, its color and background color changes. What I need to do is keep the background and color change in certain situations.

I've already created another class, identical to the hover class (maybe that's not the best way?) to do this:

.highlighted_link {
	background:      #5CBF3B;
	color:           #FFFFFF;



And set the class where necessary on the links:

<div class="menubar">
	<div class="menubar_float_left">
		<p class="menubar_text"><a id="home" href="my_dummy_url" class="highlighted_link">Home</a></p>
	</div>
</div>



But the link displays with the non-hovering background color and text color.

Aside from adding the highlighted link class, I'm not sure how else to do this; can anyone please give me some pointers?

Thanks,
Zel2008

Is This A Good Question/Topic? 0
  • +

Replies To: Setting a link "highlighted"

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3459
  • View blog
  • Posts: 11,711
  • Joined: 12-December 12

Re: Setting a link "highlighted"

Posted 18 March 2013 - 06:56 AM

There are other pseudo-selectors to use:

The 'common' pseudo-class order and reasoning:
LVFHA : :link :visited :focus :hover :active : when it is desirable for focus to display hover behaviour.

LVHFA : :link :visited :hover :focus :active : when it is not desirable for focus to display hover behaviour.
Was This Post Helpful? 0
  • +
  • -

#3 Zel2008  Icon User is offline

  • D.I.C Addict

Reputation: 14
  • View blog
  • Posts: 790
  • Joined: 06-January 09

Re: Setting a link "highlighted"

Posted 18 March 2013 - 07:02 AM

Thanks andrewsw,
I understand what all those classes are, but I'm not sure how they would apply to this situation; would you mind clarifying please?

EDIT: Never mind, I got it -- if it helps anybody:

/* The menu bar's link text when selected. */
.menubar_text a:hover,
.menubar_text a.highlighted_link {
	background:      #5CBF3B;
	color:           #FFFFFF;
}


This post has been edited by Zel2008: 18 March 2013 - 07:44 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1