I'm having an issue when I try to set the visited state, it does not seem to work.
Not sure why this is happening as the hover works but the visited does not. Any ideas why not?
#nav li:visited a{
background:#6b0c36;
}
#nav li:hover a{
background:#6b0c36;
}
what about this:
#nav li a:visited{
background:#6b0c36;
}
#nav li a:hover{
background:#6b0c36;
}
li elements cannot match the :visited pseudo-selector (think about what that would even mean). Anchors have locations that can have been visited, so if you need to change the style on a visited anchor, use:
#nav li a:visited
{
background: #6B0C36;
}
Related
The main header menu of my site has an hover effect.But when i mouse over to the right of each menu item the text color is not changing but when i mouse over near the text it changes.
I have tried
.menu li:hover{background:#222;
color:white;}
.menu a:hover{
color:white;
}
but this didn't work.work. Please Help to make the hover effect.Thank you
try this,i think its compelete:
.menu li:hover{
background:#000;
}
.menu li a:link,
.menu li a:visited{
color:#000;
}
.menu li:hover a{
color:#FFF;
}
You need to change the color of the anchor's text when hovering over the li. Therefore use the following:
.menu li:hover a {
color: #fff;
}
Change it to this:
.menu li:hover{
background:#222;
color:white
}
.menu li:hover a{
color:white;
}
Try this,
.menu li:hover{
background:#222;
}
.menu li:hover a{
color:white;
}
This may be because your anchor has already css defined for itself. you need to override them.
I have a Superfish menu that, when I hover over it and the sub-menu comes into view, I wish to keep a certain background-color for the selected option.
I have written this, however, it doesn't seem to apply:
.sf-menu ul li:hover > a {background-color: #da2026;}
Would it work if I targeted the element itself and used a < arrow to work backwards?
This could be a good place to start
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover {
background-color: #da2026;
}
or maybe just
.sf-menu li li.sfHover a{
background-color: #da2026;
}
I have an .active class to apply to li a for the current page.
But it keeps being overrode by my styling the main nav div.
#nav ul li a:link, #nav ul li a:visited {
color: #BBBBBB;
}
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff;
}
I've tried a few variations on the second rule to try and dethrone the first, but none seem to work. (I didn't have the id in originally, but I know that id is a step above class in the cascade). Maybe I'm missing something really basic, or maybe my first rule is foolishly over specific? (I always seem to be running into this sort of problem with links, specifically)
Assuming you have markup like this:
<div id="nav">
<ul>
<li>foo</li>
<li>foo</li>
<li class="active">foo</li>
</ul>
</div>
Your CSS appears to work fine.
See http://jsfiddle.net/X7eAw/1/
You may need to add
#nav ul li.active a
to force specificity if the active class is not being applied. That selector is probably overkill however.
assuming you have the active class on your li element. If you are applying active to the anchor, then the rule should be: #nav ul li a.active:link
You can prevent a style from getting overriden in CSS by using !important tag:
#nav ul li a:hover, .active, #nav ul .active a:link, #nav ul .active a:visited {
border-bottom: red solid 2px;
padding-bottom: 4px;
color: #fff !important;
}
this is the code for menu CSS code. It will work on Firefox but not in IE6.
.menu li a:hover .menu ul li:hover a{
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
IE6 only responds to :hover on a-elements. You try to use it on a list item.
Unless you pasted incorrectly, it looks like you also might be missing a comma between your two rules?
.menu li a:hover, /* <--- comma */
.menu ul li:hover a {
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
Unless you made a typo, the selector looks wrong.
It should be enough with this CSS, unless you have more uls inside the .menu lis.
.menu li a:hover {
background-image:url(images/ye.jpg);
color:#000000;
text-decoration:none;
}
Try this tutorial : www.learnwebdesignonline.com/css-tutorials/css-hover.htm
Razy
Just doing a little touch up before finishing a conversion project and I have an unwanted border-bottom that needs to be removed.
The base code is:
a:link, a:visited { color: #000000; text-decoration: none; border-bottom: 1px dotted #c6132e; }
However, I don't want it to show up on all links, particularly the main navigation. When you click on any of the links there it shows up.
On line 56 of the css I placed this code to remove the border-bottom, but it doesn't seem to be working:
ul#main_nav li a:link,
ul#main_nav li a:visited
ul#main_nav li a:hover,
ul#main_nav li a:active { border-bottom: none; }
Would appreciate a second set of eyes to look this over and help me find the solution.
Thanks!
BTW: here is the link: http://www.rouviere.com/aav/index.html just click on any of the main navigation buttons.
You missed a comma. Should be:
ul#main_nav li a:link,
ul#main_nav li a:visited,
ul#main_nav li a:hover,
ul#main_nav li a:active { border-bottom: none; }
Your rule is not applying to visited links.
As Timhessel said, it's your focus outline... although this isn't recommended you could add this to get rid of it:
ul#main_nav li a { outline-color: transparent; }
Have you tried using the !important decleration? It may be that your new styles are being overridden somewhere.
ul#main_nav li a:link,
ul#main_nav li a:visited,
ul#main_nav li a:hover,
ul#main_nav li a:active { border-bottom: none !important; }
Also, as noted by #iamtooamazing, you missed a comma after the visited decleration.