Not sure if this is the css I am looking for. I want the active link to have a hover color. By active link I mean my aside link that I am currently visiting.
.widget-area .widget a {
color: #bc7ed1;
}
.widget-area .widget a:hover {
color: #D6A0DB;
}
.widget-area .widget a:visited {
color: #ccc2d3;
}
.widget-area .widget a:visited:hover {
color: #;
}
.widget-area .widget a:active {
color: #;
}
a:active isn't making a color change - is there a different word for the page I am currently visiting or active on? Perhaps something like a:visited:active? Just want the page I am on, that link to be a new color.
I think you misunderstood the pseudo class :active
:active is used for when a user clicks on the link and holds it. And :visited is when a url is already visited. w3schools link on :active
If you need a special style for link of current page add a class like .currentpage to the a-tag with the url via backend or via javascript with style as
.currentpage {color:#ff0000;} /* or any color you prefer */
Hope this helps.
Related
I am trying to change the colour of the font which appears in images in gallery pages such as this page on the site.
I would like to change the text below each image (such a Trail Necklace 111) from #666666 to #007faa.
I used the web inspector to identify that this is an H4 tag in a div class called portfoliotitle_3
It is also a link so altogether I've updated the following parts of the CSS, saved the CSS and refreshed the page a few times but the text colour doesn't change.
#contentwide .portfoliotitle h4 {
color: #007faa;
}
.portfoliotitle a,
.portfoliotitle a:visited {
color: #007faa;
}
#contentwide .portfoliotitle_3 h4 {
color: #007faa;
}
.portfoliotitle_3 a,
.portfoliotitle_3 a:visited {
color: #007faa !important;
}
.portfoliotitle_3 a:hover {
color: #007faa;
text-decoration: none !important;
}
I must be missing something very basic and if anyone can take a fresh look and give me some pointers, that would be very appreciated.
Many thanks
i think Thats because the page load style.css of the page after each reload
It's because of an anchor tag that has some important in color.. so you should probably change the anchor tag to change the color.
.portfoliotitle_3 a, .portfoliotitle_3 a:visited {
color:#007faa !important
}
Cascading is apply for the element a. You can delete this code in internal css style element.
.portfoliotitle_3 a, .portfoliotitle_3 a:visited {
color: rgb(85, 212, 255) !important;
}
I've got a CSS prob i'd love some help with.
My site (www.melodylakerart.com) has a 'Read More' link in its cookie notice bar (to the right of the privacy notice).
The 'read more' link is currently only visible on mouse over. Since the cookie bar is black I therefore assume the link text is black untill mouseover
I just want to make the text a colour other than black so you can see the link without having to mouseover. I've tried the below CSS with no luck. Can anyone help?
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4 !important;}
.cn-privacy-policy-link {color: #feb8b4;}
.cn-more-info .cn-privacy-policy-link .cn-link .button {color: #feb8b4;}
Link color can be changed via a:link or under a specific class
.cn-privacy-policy-link a:link
for example:
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: green;
}
a:active {
color: black;
}
a:hover{
color: #bada55;
}
.test a:link{
color: yellow;
}
Example
<div class="test">Yellow link</div>
You can also change the link color on hover by a:hover or the link color after being clicked by a:visited or while being clicked with a:active
The problem is that you have this:
input[type="submit"], button, .button {... color: #000000!important; ...}
And that is the classic reason why !important is a bad practice.
If all other parts work as expected, you need to trigger one of the element's classes. For instance: cn-privacy-policy-link {color: #feb8b4!important;} will work.
So, I need to remove a visited link coloring from my navigation bar, as it will look ugly.
I have tried to use text-decoration: none; and color: white; but that does not seem to help it.
CSS for navigation
Actual code
I removed the actual links from the code, in the real version there is link but for this question links are replaced with #
In addition to Bariock's answer, this will help reset your <a> links in all circumstances to your specified css.
a:visited, a:hover, a:active, a:focus {
color: yourColor !important;
text-decoration: none !important;
outline: none !important;
}
The !important signifies that it has a higher precedence than that of other rules declaring the same values for the same selectors. Note: you can still style them separately such like you would with :hover.
a:visited{
color: your-color;
}
I edited the <a> tag to go around the <button> so the text is back to white now and the button actually works. It is no longer just "click text to visit link" the whole button works.
<button class="dropbtn">Community</button>
Try adding a !important to the end of the css styles like so:
a {
color: white !important;
}
Hope this helps!
I recommend you first set the style of the link tag, for example:
.dropdown a{ color:#fff }
now your text links inside the container with the class .dropdown will be as white color. Then you don't need to set a visited link color, unless you want to set it.
If you want to get rid the underline in the link, your style will be like this:
.dropdown a{ color:#fff; text-decoration: none; }
I'm just trying to create a simple menu. So when you click a link, it directs you to another page and shows you that you selected that link by changing colour.
The problem I have is when I click a link within the list, the page loads and for some reason the list elements all enter the a:visited field. Setting them to red. I have the JSFIDDLE Here. I know its simple but it's getting on my nerves.
CSS Code:
ul.nav_style{list-style: none;}
ul.nav_style li {padding-left: 1em; text-indent: -.7em;}
ul.nav_style li:before {
content: "• ";
color: #C0C0C0; /* or whatever color you prefer */
}
ul.nav_style li a:link { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:visited { color: #FF0000; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
HTML Code:
<ul class="nav_style">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
Thanks in advance.
Chris
The explanation is simple: all the links have the same href. Assuming you will change the hrefs, this will not be an issue on your final site. :)
See my fiddle. All I did was to change the hrefs. Does it work as you expect now? http://jsfiddle.net/TheNix/sR3Ub/3/
EDIT:
Now, if you simply wish to make sure the link looks the same regardless if it's been visited or not, all you have to do is to apply the same styling to the :link and :visited states, like so:
ul.nav_style li a:link,
ul.nav_style li a:visited { color: #C0C0C0; text-decoration: none;}
ul.nav_style li a:hover { color: #58595B; text-decoration: none;}
ul.nav_style li a:active { color: #E6BD13; text-decoration: none;}
Now the link should be grey when idle (even if it's been visited), darker grey when you hover over it, and gold when you click it. See fiddle: http://jsfiddle.net/TheNix/sR3Ub/5/
EDIT v2
It seems you are a little bit confused about the states of a link, so here's the low-down:
:link is the standard idle link (can also be targeted simply as a)
:hover is the act of hovering over the element with the cursor.
:visited is applied to links which have already been visited.
:active is the state when the link is active in the user interface — e.g. when you are hovering over it, and pressing left mouse button (onmousedown), or when using the TAB to highlight the link. When you release the mouse button (onmouseup) or tab out, it will revert back to it's previous state.
:active therefore have nothing to do with determining if it is the active page, it only applies when you hold the mouse button down.
What you are trying to do, is unfortunately not possible with CSS alone. Here is a simple example of how it can be achieved with jQuery. http://jsfiddle.net/TheNix/sR3Ub/6/
This may be a reason of security of browsers, http://dbaron.org/mozilla/visited-privacy
Mozilla http://blog.mozilla.org/security/2010/03/31/plugging-the-css-history-leak/ also informed about this. Most of latest browsers has taken this action to protect the users.
you must put target url in href or in data-href or etc,and after click in link and load new page you must check window location and set link color to red:
$(function(){
var url = window.location.href;
$("ul.nav_style li").each(function(i,e){
var $this = $(e);
if ($this.attr("href") == url){
$this.css("color","red");
}
};
});
Problem solved, I've decided to just use PHP to generate my lists using arrays and an if statement to give the current page its css class.
PHP CODE:
if($title == "Enter"){
$enterArrayPages = array("competition.php","full_detail.php", "judges.php", "get_involved.php", "employers.php");
$enterArrayText = array("The Competition","Full Detail","The Judges","Get Involved", "Employers");
echo '<ul class="nav_style">';
for($i=0; $i<sizeof($enterArrayPages); $i++){
if($proper_title == $enterArrayText[$i]){
echo '<li><a class="linkChange" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
else{
echo '<li><a class="menu_links" href="'.$enterArrayPages[$i].'">'.$enterArrayText[$i].'</a></li>';
}
}
echo '</ul>';
}
So as you can see, the code loops through each of the pages stored in an array and if the title of the page is equal to the one in the array I change its class, making the color of the link different to the others.
Here is the CSS:
a.menu_links:link { color: #58595B; text-decoration: none;}
a.menu_links:visited { color: #58595B; text-decoration: none; }
a.menu_links:active { color: #E6BD13; text-decoration: none; }
a.menu_links:hover { color: #E6BD13; text-decoration: none; }
.linkChange {
color: #E6BD13;
text-decoration: none;
}
It's really simple, I just had to think of the logic via PHP. I thought that implementing it in pure css would be good enough, but with time ticking, I resorted to PHP.
Here is an image of the code output:
Thanks for everyones comments! Much appreciated!
I have some HTML markup in my ASP.NET master page representing a basic navigation menu. THree words that link to three pages. My CSS and HTML are included below for your reference.
When I load the page, the links appear with the correct color (red). If I hover over a link, the link changes to the correct color (blue). So far, we're good. Clicking a link changes the link color to the correct color (yellow). The two remaining links are still red / blue as expected. Clicking a second link changes that link to yellow also. Now I have two yellow links. Neither yellow link displays the hover color (blue) like I'd prefer. Clicking the third link causes it to be yellow, too and none of the links display the hover style.
Although a link has been clicked, I'd like the color to be stored and have the hover color displayed. How do I accomplish this? This is an ASP.NET web application project but I'm only using straight HTML at this point.
/* --- css --- */
a:link
{
color: red;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
/* --- HTML --- */
<p class="MenuItems">
Cars.
Trucks.
Vans.
</p>
As described here, the :hover declaration must come AFTER the :visited and :active declarations.
Basically, in the cascade of your current styles, you won't ever see the :hover color.
Your
a:hover
declaration must come after your
a:visited
declaration in the stylesheet because the visited state is currently taking priority. Always put hover at the end of the a styles declaration block to prevent this.
a:link -> a:visited -> a:active -> a:hover is the optimal ordering.
Just use this:
a:hover
{
color: blue ! important;
text-decoration: none ! important;
}
or as described - use this order:
a:link
{
color: red;
text-decoration: none;
}
a:active
{
color: green;
text-decoration: none;
}
a:visited
{
color: yellow;
text-decoration: none;
}
a:hover
{
color: blue;
text-decoration: none;
}