How can I change the colors of the hyperlink created by the helper function Html.ActionLink?
[additional detail] The colors will have to be different for each state of the hyperlink, i.e. active, selected, was already selected, etc.
0
Add a comment
|
4 Answers
Typically you would do something like this:
Html.ActionLink("My Link", "MyAction", null, new { @class = "my-class" })
And then use CSS to style my-class:
a.my-class { color: #333333 }
a.my-class:active { color: #666666 }
a.my-class:link { color: #999999 }
a.my-class:visited { color: #CCCCCC }
Comments
The ActionLink() method is overloaded. Some of those signatures allow for the passing of a parameter object htmlAttributes.
You can do something like this:
Html.ActionLink("foo", "bar","baz",
new { id = 1}, // Route args if needed; null if not.
new {@style="color:#000aaa;" }
);
Perhaps you have a CSS class already defined:
Html.ActionLink("foo", "bar","baz",
new { id = 1}, // Route args if needed; null if not.
new {@class="MyClass;" }
);
2 Comments
Ronald
Thanks. I will try that. My problem with the example is if it works the hyperlink will have only color (may be). Hyperlinks have states like active, selected, etc. I need them to have different colors.
Erik Funkenbusch
@Ronald - You would just add the proper css selectors, just like you would do in standard html. There are literally thousands of articles discussing this out there, shouldn't be hard to find.
Some explainations base on @dahlbyk answer
- a:link - a normal, unvisited link
- a:visited - a link the user has visited
- a:hover - a link when the user mouses over it
- a:active - a link the moment it is clicked
When setting the style for several link states, there are some order rules:
- a:hover MUST come after a:link and a:visited
- a:active MUST come after a:hover
More detailes can be found here
2 Comments
SJaka
Your comment about order rules saved me the frustration. Thank you.
Carlos Liu
@SJaka my pleasure;-)
try, this way also will helpful to someone
Html.ActionLink("Your Link", "YourAction")
<style>
a{
color: #FF5722;
text-decoration: none;
}
//if needed hover
a:hover {
color: #FF5722;
}
//Likewise active,visited
</style>
