Search code examples
csscolorshovertoggleinline-styles

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

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;
}
Solution

  • 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?