How do you prevent inline CSS link "color" from canceling out CSS stylesheet link "hover"?

Question

I want my links*** to change color when clicked, but also change color when hovered over.

I got a javascript function to change the color when clicked, but it requires inline CSS which is keeping my style sheet's hover from working.

Is there a way to have the inline CSS and CSS stylesheet not cancel out? Or is there another way to change the color of the link when clicked that wont cancel out the hover color?

*(These links are being used to show a hidden div using javascript)

script:

function toggle_link(select){
var color = select.style.color;
select.style.color = (color == "white" ? "yellow" : "white");
}

html:

<div id="gdtitle">
<a class="port" href="#" onclick="toggle('gdhide');toggle_link(this);" style="color:white">Graphic Design</a>
</div>

css style sheet

a.port{
text-decoration: none;
color: white;
}
a.port:hover{
text-decoration: none;
color: yellow;
}

So you want it to toggle white/yellow on every click, but always hover yellow. So if it's currently yellow, you want it to stay yellow on hover. Right? — ThinkingStiff, Jun 26 '12 at 01:35
Right. When it toggles white/yellow it also toggles a hidden div. (I.E. white=hidden yellow=not hidden) — openmaw, Jun 26 '12 at 01:44

score 4 · Accepted Answer · edited May 23 '17 at 10:09

4

You could use !important to override inline css

Better yet, don't but alter the behaviour of your toggle_link - would you rather add a class to the element and style it instead?

edited May 23 '17 at 10:09

Community

1
1

answered Jun 26 '12 at 01:18

Oleg

24,465
8
61
91

I added !important to the hover and that worked. (color: yellow !imporant;) – openmaw Jun 26 '12 at 01:48

score 1 · Answer 2 · answered Jun 26 '12 at 01:17

1

Use the :link, :visited, and :active pseudo-classes on the <a>.

CSS:

a.port, a.port:link, a.port:visited, a.port:active {
    text-decoration: none;
    color: white;
}

answered Jun 26 '12 at 01:17

ThinkingStiff

64,767
30
146
239

I'm under impression that the `toggle_link` functionality is different from what would be accomplished by `:active` – Oleg Jun 26 '12 at 01:19
Have to agree with @ThinkingStiff; the :active pseudo-class is a better solution than using a click event handler just to change the style. It is also more usable, as :active works with keyboard navigation, and a click handler only works for mouse clicks – jackwanders Jun 26 '12 at 01:27
When you click the link it is toggling open a hidden div. When this div is open I want the link to change to yellow. The :active pseudo-class isn't doing that. – openmaw Jun 26 '12 at 01:35

How do you prevent inline CSS link "color" from canceling out CSS stylesheet link "hover"?

2 Answers2