I have CSS made by me. I used it to make my nav link in green color. So I used a:visited. Then mouse over visited link won't make work hover properties. Please help me to make it green and red when hover. [sorry for my bad English]
CSS
#nav {
font-family:arial;
font-size:20px;
}
#nav a:link {
color:green;
text-decoration:none;
}
#nav a:hover {
color:red;
text-decoration:none;
}
#nav a:visited {
color:green;
}
#nav li:hover {
font-family:arial;
font-size:21px;
}
#nav li {
float:right;
margin: 5px;
}
#nav li#active {
font-family:arial;
font-color:red;
font-size:20px;
font-weight:bold;
}
#nav li#active:active {
font-color:red;
}
Learn about the cascade.
#nav a:hover and #nav a:visited are equally specific so the last one will override the first one.
Put the :hover rule after the :visited rule if you want it to overwrite the other way around.
Related
I'm trying to set the color of a span box to red when I ':focus' on a link. The span changes color on ':active', but nothing seems to happen when I use ':focus'. The categories will output different types of products on click using angular. At the moment, when I click on one of the filters there is no indication that one of the categories has been activated, heavily impacting the UX. I'm hoping to do this with html and css only if possible.
<div class="checklist categories">
<ul>
<li><a><span></span>All</a></li>
<li><a><span></span>House Favourites</a></li>
</ul>
</div>
.checklist ul li{
font-size:14px;
font-weight:400;
list-style:none;
padding: 7px 0 7px 23px;
cursor: pointer;
}
.checklist li span{
float:left;
width:11px;
height:11px;
margin-left:-23px;
margin-top:4px;
border: 1px solid #d1d3d7;
position:relative;
}
.checklist li a{
color:#676a74;
text-decoration:none;
}
.checklist li a:hover{
color:#222;
}
.categories a:hover span{
border-color:#a6aab3;
}
.checklist .checked span{
border-color:#8d939f;
}
.checklist a:active span {
background-color: red;
}
// This code below is the issue as :focus seems to do nothing
.checklist a:focus span {
background-color: red;
}
I was given a solution for this using Angular and typescript:
Code
I used this for styling navigation bar of my webpage but the color is not changing on hover
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
HTML code:
<ul class = "nav">
<li>Home</li>
<li>Our Products</li>
<li>Contact us</li>
</ul>
can someone suggest what I did wrong?
Either add !important here:
.nav li a:hover,.nav li a:active {
background-color:#7A991A !important;
}
Or move the properties for :hover (and :active) after those for :link.
Replace .nav a:link with .nav li a
demo
.nav li a, .nav li a:visited {
/*here^^^*/
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
This is working fine now in the fiddle.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:link,.nav li a:visited {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav li a:visited{
background-color:#98bf21;
}
.nav li a:hover,.nav li a:active {
background-color:#7A991A;
}
.nav li a{
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
Your a:hover is covered by a:link or so on.
I guess, Since a:hover is of the same level with a:link, Css class at the lower position of the file has higher priority.
You can refer to this:
resolve css conflict
Here is the demo.
.nav {
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
.nav li {
float: left;
}
.nav-link {
display:block;
width:9em;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
.nav-link:hover,.nav-link:active {
background-color:#7A991A;
}
it's not a good practice to nest too many tags, give it a class.
use :link :visited :hover :active only when you want to rewrite the default styles.
css is cascading style sheet, order matters, put .nav-link first to normalize default styles and then overwritten default with :hover and :active.
!important is not a good practice here, just rearrange the order.
I'm trying to get this simple horizontal navigation menu to work but when I go and add an "active" class to the active li, nothing is changing. the .active just doesn't show up? What did I do wrong guys?
<div id="nav">
<ul>
<li class="active">All</li>
<li>Services</li>
<li>Technology</li>
<li>Referral</li>
<li>Reseller</li>
</ul>
</div>
Here's the CSS:
#nav ul{
list-style-type:none;
margin:40px auto;
padding:0;
width:625px;
height:50px;
}
#nav li{
display:inline;
}
#nav li a,
#nav li a:visited,
#nav li a:link {
width:120px;
height:20px;
display:inline;
float:left;
text-align: center;
padding-top:5px;
padding-bottom: 5px;
margin-top:auto;
margin-bottom:auto;
font-family: arial;
text-decoration: none;
color:#929292;
font-weight: bold;
background-color: #e5e5e5;
margin-left:5px;
-moz-border-radius: 15px;
border-radius: 15px;
}
#nav li a{
}
#nav li a:hover{
color: #ffffff;
cursor: pointer;
background-color: #2F5290;
}
#nav li a:active{
color: #FAAF31;
}
.active{
background-color: #2F5290;
color: #FAAF31;
}
Specificity is your problem. In quick terms: ids are worth 100, classes worth 10 and elements worth 1, so #nav li a is worth 102 points of specificity, but .active is only worth 10 points. If you update it to #nav li a.active you will get 112 points, thus having enough specificity to override your original styles. You can read more about specificity on W3C
Thanks #setek for the good answer, I thought that it should really be the answer and added a bit as well.
I have a compound hyperlink that contains two span elements, one of which I want to underline on hover, and the other not. A good example of this is the name / username link pair found at the top of Twitter tweets. I just can't figure out how they do it.
My attempt:
HTML:
<a href="http://www.google.com">
<span class="main">My link</span>
<span class="caption"> and caption</span>
</a>
CSS:
a {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.caption:hover {
text-decoration:none; /* I want this to portion to not be underlined, but it still is */
}
fiddle: http://jsfiddle.net/vgKSh/1/
a {
text-decoration:none;
font-weight:bold;
}
a:hover span{
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a:hover span.caption {
text-decoration:none;
}
You almost got it. Put text-decoration:underline; in main class only.
a {
text-decoration:none;
font-weight:bold;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.main:hover {
text-decoration:underline;
}
http://jsfiddle.net/vgKSh/9/
Forked and fixed here: http://jsfiddle.net/CtD8M/
Just have the specific span a set to text-decoration underline, rather than setting globally
Fiddle: http://jsfiddle.net/vgKSh/4/
a {
text-decoration:none;
font-weight:bold;
}
a:hover span.main {
text-decoration:underline;
}
a span.caption {
color:gray;
font-weight:normal;
}
a:hover span.caption {
text-decoration:none;
}
a:hover span {
text-decoration:none;
}
a:hover .main{
text-decoration: underline;
}
Just as a style thing, I never use text-decoration but use border-bottom instead with a bit of padding.
a {
text-decoration:none;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
a span.caption {
color:gray;
font-weight:normal;
}
a span.main:hover {
text-decoration:underline;
}
I am trying to style hyperlinks: some must be white, and some others must be normal color. Here is what I have:
Register
a:link {
color:#FFF;
text-decoration:none;
}
a:hover {
color:#FFF;
text-decoration:underline;
}
a:visited {
color:#FFF;
text-decoration:none;
}
a:active {
color:#FFF;
text-decoration:none;
}
.normal a:hover{
color:#00F;
}
.normal a:link{
color:#00F;
}
.normal a:visited{
color:#00F;
}
.normal a:active{
color:#00F;
}
The normal links work fine. But when I use the class=normal, the link is still white. Why are the normal links taking precedence?
try define the class normal like this:
a.normal:hover
{
color:#00F;
}
a.normal:link
{
color:#00F;
}
a.normal:visited
{
color:#00F;
}
a.normal:active
{
color:#00F;
}