I have the following HTML:
<div class="menu">
<a class="main-nav-item" href="home">home</a>
<a class="main-nav-item-current" href="business">business</a>
<a class="main-nav-item" href="about-me">about me</a>
</div>
In CSS, I want to set the a:hover for these menu items to a particular color. So I write:
.menu a:hover
{
color:#DDD;
}
But, I want to set this a:hover color only for those <a> tags with the class main-nav-item and not the main-nav-item-current, because it has a different color and shouldn't change on hover. All <a> tags within the menu div should change color on hover except the one with the current class.
How can I do it using CSS?
I tried something like
.menu a:hover .main-nav-item
{
color:#DDD;
}
thinking that only ones with main-nav-item class will change color on hover, and not the current one. But it is not working.
Try this:
.menu a.main-nav-item:hover { }
In order to understand how this works it is important to read this the way the browser does. The a defines the element, the .main-nav-item qualifies the element to only those which have that class, and finally the psuedo-class :hover is applied to the qualified expression that comes before.
Basically it boils down to this:
Apply this hover rule to all anchor elements with the class main-nav-item that are a descendant child of any element with the class menu.
Cascading is biting you. Try this:
.menu > .main-nav-item:hover
{
color:#DDD;
}
This code says to grab all the links that have a class of main-nav-item AND are children of the class menu, and apply the color #DDD when they are hovered.
Set a:hover based on class you can simply try:
a.main-nav-item:hover { }
how about
.main-nav-item:hover
this keeps the specificity low
try this
.div
{
text-decoration:none;
font-size:16;
display:block;
padding:14px;
}
.div a:hover
{
background-color:#080808;
color:white;
}
lets say we have a anchor tag used in our code and class"div" is called in the main program. the a:hover will do the thing, it will give a vampire black color to the background and white color to the text when the mouse is moved over it that's what hover means.
I found if you add a !important, it works when previously it didn't.
a.main-nav-item:link {
color: blue !important;
}
a.main-nav-item:visited {
color: red !important;
}
a.main-nav-item:hover {
color: purple !important;
}
a.main-nav-item:focus {
color: green !important;
}
a.main-nav-item:active {
color: green !important;
}
Also, I've read somewhere that the order is important. The mnemonic "LoVe HaTe" helps you remember it: link -> visited -> hover -> active
One common error is leaving a space before the class names. Even if this was the correct syntax:
.menu a:hover .main-nav-item
it never would have worked.
Therefore, you would not write
.menu a .main-nav-item:hover
it would be
.menu a.main-nav-item:hover
Related
I'm slowly learning html/css. I have a client that wants 3 links on the page to be noticeable link colors (in this case, blue). However, when I try to edit the style of the links, only two of them are showing the changes.
I can't set it globally, or other links (such as some social media icons) are changing.
Here is what I've tried:
div.entry-content a:link {
color: blue;
}
entry-content a:link {
color: blue;
}
Here is what I'm looking at when I inspect the page:
So, where am I going wrong? I hope I added everything needed for assistance. Thanks.
I'm assuming all three links are wrapped in in div with class entry-content. The only thing I can think of is that the first link is black or darker color because it's active or visited. You can style your links with just a selector or with additional pseudo selectors.
/* Just a selector */
.entry-content a {
color: blue;
}
/* Just a selector */
.entry-content a,
.entry-content a:visited,
.entry-content a:active {
color: blue;
}
It seems you have clicked on the link earlier, so the link status is active or visited.
Try this, if ok then update your code with pseudo selectors :active and :visited:
a, a:link, a:visited, a:active {
color: blue;
}
Hope this help!
Try adding a class name to the anchors, like so:
<a class="blue" href="url">link text</a> and then in your css create the blue class .blue { color: blue; }
I have this site:
http://paul.dac-proiect.ro/index.php/about/
I want that when the user clicks on the menu item selected to have red.
I tried the code below but do not understand why do not work.
I found more information about this but I do not understand why the work is something wrong in writing code?
.navbar .nav > li > a:active{color:red;}
I am convinced that it is something very simple but fail to figure out what the problem.
You can help me solve this problem?
Thanks in advance!
Try this:
li.current_page_item > a {
color: #F00 !important;
}
:active pseudoclass is just a moment when you click and has mouse button down.
Active item in your case has class current_page_item, so:
.current_page_item > a {color: red;}
Add this in your style sheet and try.
a:hover, a:active {
outline: 0;
color: red !important;
}
Simplest (but limited since it's coloring all the visited links) is using the :visited selector, like the old days when visited links turned purple.
Other option would be to add a css class .active which applies the desired color. This could be done in plain HTML (then you have to configure this for every single page) or in PHP (by comparing current page with the URL; if it is the same, apply .active)
I suggested to add a class when navigation clicks.
For example :
Highlights
Add class to it when click
<a class="active" href="http://paul.dac-proiect.ro/">Highlights</a>
CSS
.active{
color : #f00;
}
This will work
li.current_page_item > a {
color: red !important;
}
because you used
li.current_page_item > a {
color: #000000 !important;
}
so you need to change color from #000000 to red.
I just saw this question Don't change link color when a link is clicked and now I'm stuck.
I have multiple links on my page, some of them with class="menuLink". Now only for those I want to set the colors different as a normal link. If I would just use
a:link { color:green}
a:hover { color:red }
...
this would apply to all links. But neither
.menuLink:link {color:green}
//I think because the css "doesn't know" that this class is used for links
nor
.menuLink a:link {color:green}
work. How can I achieve this?
You were close.
a.menuLink:link { color: green; }
Was what you intended to achieve. But try this:
a.menuLink { color: green; }
Would mean a a with a classname of menuLink, the :link is redundant.
.menuLink a:link
Would mean a inside of an element with a classname of menuLink.
Have you tried:
.menuLink {color: green;}
I have to disable the color change of an anchor tag when visited. I did this:
a:visited{ color: gray }
(The link is gray in color before visited.) But this is a way where I explicitly state the color after the link is visited, which is again a color change.
How can I disable the color change of an anchor tag when visited without doing any explicit color changes?
If you just want the anchor color to stay the same as the anchor's parent element you can leverage inherit:
a, a:visited, a:hover, a:active {
color: inherit;
}
Notice there is no need to repeat the rule for each selector; just use a comma separated list of selectors (order matters for anchor pseudo elements). Also, you can apply the pseudo selectors to a class if you want to selectively disable the special anchor colors:
.special-link, .special-link:visited, .special-link:hover, .special-link:active {
color: inherit;
}
Your question only asks about the visited state, but I assumed you meant all of the states. You can remove the other selectors if you want to allow color changes on all but visited.
You can't. You can only style the visited state.
For other people who find this, make sure that you have them in the right order:
a {color:#FF0000;} /* Unvisited link */
a:visited {color:#00FF00;} /* Visited link */
a:hover {color:#FF00FF;} /* Mouse over link */
a:active {color:#0000FF;} /* Selected link */
For :hover to override :visited, and to make sure :visited is the same as the initial color, :hover must come after :visited.
So if you want to disable the color change, a:visited must come before a:hover. Like this:
a { color: gray; }
a:visited { color: orange; }
a:hover { color: red; }
To disable :visited change you would style it with non-pseudo class:
a, a:visited { color: gray; }
a:hover { color: red; }
It’s possible to use the LinkText system color value from the CSS 4 Color Module to obtain the browser default value if one wishes to defer to that.
a:visited { color: LinkText; }
link
However note:
These values may also be used in other contexts, but are not widely supported by browsers.
It at least appears to work in Firefox 98 and Chromium 99.
If you use some pre-processor like SASS, you can use #extend feature:
a:visited {
#extend a;
}
As a result you will see automatically-added a:visited selector for every style with a selector, so be carefully with it, because your style-table may be increase in size very much.
As a compromise you can add #extend only in those block wich you really need.
For those who are dynamically applying classes (i.e. active):
Simply add a "div" tag inside the "a" tag with an href attribute:
<a href='your-link'>
<div>
<span>your link name</span>
</div>
</a>
Either delete the selector or set it to the same color as your text appears normally.
You can solve this issue by calling a:link and a:visited selectors together. And follow it with a:hover selector.
a:link, a:visited
{color: gray;}
a:hover
{color: skyblue;}
I think if I set a color for a:visited it is not good: you must know the default color of tag a and every time synchronize it with a:visited.
I don't want know about the default color (it can be set in common.css of your application, or you can using outside styles).
I think it's nice solution:
HTML:
<body>
<a class="absolute">Test of URL</a>
<a class="unvisited absolute" target="_blank" href="google.ru">Test of URL</a>
</body>
CSS:
.absolute{
position: absolute;
}
a.unvisited, a.unvisited:visited, a.unvisited:active{
text-decoration: none;
color: transparent;
}
a {
color: orange !important;
}
!important has the effect that the property in question cannot be overridden unless another !important is used. It is generally considered bad practice to use !important unless absolutely necessary; however, I can't think of any other way of ‘disabling’ :visited using CSS only.
Use:
a:visited {
text-decoration: none;
}
But it will only affect links that haven't been clicked on yet.
How can I make a link in HTML turn a color when hovering and remove the underline using CSS?
You want to look at the :hover pseudoselector, the color property, and the text-decoration property.
a:hover { color: red; text-decoration: none; }
To assure your hyperlink is styled as you want (and does not conflict with other style rules), use !important:
a:hover { color: red !important; text-decoration: none !important; }
Also in addition to stragers answer, make sure to declare the pseudo classes in the LoVe HAte way. You have to declare :link first, then :visited, then :hover and then :active. Otherwise some browsers may not apply the pseudo classes.
a:link{
/*this only apllies to named anchors*/
}
a:visited{
/*possible styles for visited links*/
}
a:hover{
/*when mouse hovers over a-tag*/
text-decoration:none;
color:red;
}
a:active{
/*possible styles on active (when a-tag is clicked)*/
}