I am using CSS code like this
.top_nav ul li a{
color: #444; background: #111;
}
.top_nav ul li a:hover{
color: #fff; background: #555;
}
.top_nav ul li a:active{
color: #111; background: #fff;
}
But the problem is this when any page is active, on navigation menu that link's background not change. Background of that link is same as other's.
You are probably looking for focusing an active link in your menu with different color. Mind that a:active is not intended for that purpose.
A link only takes up the a:active state when it is clicked, so you only see the change for a few seconds. You should look for a different way for getting it done, like adding a new css class for the selected menu item from your server side script.
The active is only applied when you click on it. Do it like this:
<li>Link</li>
And then style it
top_nav ul li a.active {
color: #111;
background: #fff;
}
The a:active selector refers to active state of a link, not your active page.
http://www.w3schools.com/cssref/sel_active.asp
You will have to set some "active page" class to your menu item for the page you are currently viewing and refer to that in yor CSS.
If you have static HTML pages, you can add a class to your navigation items representing the current active page:
<li class="current">...</li>
and then change your css to:
.top_nav ul li.current a {
color: #111; background: #fff;
}
Related
i have this site in wordpress, which has a menu
and the css property which changes the color on hover
.main-navigation a:hover {
background: #fa5742;
color: #f1f1f1;
}
i want Home to be highlighted by default, how can i do that?
i am new to wordpress,therefor i might be missing the simplest of tricks here.
proper way to do it is by highlighting the current menu item
.main-navigation li.current_page_item a {
background: #fa5742;
color: #f1f1f1;
}
Please Write Css (use First Child)
.main-navigation li:first-chile a {
background: #fa5742;
color: #f1f1f1;
}
If you're using a standard WordPress menu you could use the .current_page_item class to highlight the page the user is currently on.
.main-navigation li.current_page_item a {
background: #fa5742;
color: #f1f1f1;
}
If like you describe you simply wish for the first item to always be highlighted you can use the following CSS.
.main-navigation li:first-child a {
background: #fa5742;
color: #f1f1f1;
}
Hi I'm trying to make a joomla site here, only one problem I can't seem to figure out. The color of my active link doesn't change, it has an image and a color, the image is in place as it should be, but the color doesn't change. Anyone an idea? here's the css:
a {
color: #ffffff;
text-decoration: none;
}
a:link, a:visited {color: #ffffff; text-decoration: none;}
a:focus, a:hover {
color: #e2231a;
text-decoration: none;
}
#links li.active {
color: #e2231a;
text-decoration: none;
background: url("../images/hover.png") bottom center no-repeat;
padding-bottom: 17px;
}
I know the active statement looks different then the rest, but this was the only way to get my image to show. Really stuck on this..
Used to this for a tag
#links li.active a {
// here style for your anchor link
}
If you want just the list elements within Links to change when active use this.
#links li:active a {color:#000;}
If you want all lists to be effected by this change use
li:active a {color:#000;}
If you want more than just the li elements to change ie ever single link on the site that is active to obey these rules then use the following
a:active {color:#000;}
Hope this helps you out.
Is there a way to change the css property for example of a box when an element (inside the ) is hover?
for example if I have:
<table>
<tr><td><a>.....</td></tr>
</table>
I want to change the property of the container td when the link a has the mouse over. Is it possible?
Sorry, I have not explained well.
I have a , not a table...it was only an example....
I have
<ul>
<li><a>.....
in my css I have:
#navigation li a {
text-decoration: none;
color: #333;
text-transform: none;
}
#navigation li:hover {
color: white;
background-color: #333;
}
#navigation li a:hover {
color: white;
background-color: #333;
}
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
Instead of
#navigation li a:hover {
try
#navigation li:hover a {
but It does not works because if I go on the link it's ok, but if I go with the mouse in the li but off the link the color of the text does not change...
That's because you're putting the hover on the link itself. If you want the link to react when you mouse over the li, simply change where you put the hover pseudo-class:
li:hover a {
color: #d2d2d2;
}
This basically says "when the li is hovered, the link inside it should change to these styles."
Alternatively, you can add padding to the link (ex - padding: 5px), making its reaction field larger. So:
li a {
display: block; /* Required to make it honor padding. */
padding: 10px;
}
li a:hover {
color: #d2d2d2;
}
As long as you don't have your li elements set to a larger size than the a element (via height, width, margin, and/or padding), then the li will "shrink-wrap" the a and be the same size as the total size of the link.
You cant change a property of a parent element, but you can trigger a hover event on the parent td itself:
table td:hover {
background-color: red;
}
You could add display: block to the anchor element which would make the anchor fill the li... Depending on indentation on the ul etc etc..
li a { display: block; }
I'm creating a Inbox in which there will me a asp menu on the side and Inbox on the center. I need to change the font color to red and make it bold when I see a new row from the database. I have used adding on the menu item.
If Not Hovered it looks like this.
If Hovered It Has to look like this.
But the problem is that when I hover on the text it looks like the image shown above, but if I hover slightly on the top or bottom of the menuItenm (Inside the Menu Item but not on Text), Then This looks like this.
CSS used For Menu Item.
.Menu ul li a {
color: black;
background: #E9E9E9;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;}
.Menu ul li a:hover{
background-image: none;
color: white;
background: #424242;}
Here is the code I used to change The color and set the font to bold From server side.
Menu1.Items[0].Text = "<div class='inboxno' >" + "Inbox (" + (i + 1) + ")" + "</div>";
Here is the CSS class of inbox.
.inboxno{
background-image: none;
color: Red;
font-weight:bold;}
.inboxno:hover{
background-image: none;
color: white;
background: #424242;
font-weight:bold;}
I think I understand the problem. It is, that a <DIV> is created around the inbox Text inside the Menu Item and It has the Css inboxno. But the Menu Item has padding and When I place mouse on the padding Area then the inboxno:hover class is not being applied to the Div.
I think one of the solutions to this problem is, if I could access the .Menu ul li a class from .inboxno:hover class I will remove the Padding Property and Set the Same padding property in the .inboxno:hover class.
But I don't know how to access the .Menu ul li a class from .inboxno:hover class.
Can you Help me??
Not sure if you're just asking about the hover or not but try doing
.Menu ul li:hover a {
background-image: none;
color: white;
background: #424242;
}
I'm having an issue on my site http://noahsdad.com; if you look at the widget I installed at the very bottom, you can't see the links unless you hover over them. This doesn't just happen with this widget, almost any I put in have a 'haze' over them, if that makes sense.
I'm wondering if someone could help me figure out what's going on, and how to correct it.
Thanks.
The links are visible, they are just set to a light grey colour. You have these rules defined in your default.css file:
a:link, a:visited {
color: #EEEEEE;
}
a:hover {
color: #999999;
}
You could change the value of the standard link colour, or you create a new rule with a higher specitivity, so that only links in that widget are affected.
#dsq-combo-widget a {
color: #999;
}
Update
You haven't specified the color for your new style:
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #999; <-- Add this
}
Only because of color you can't see it but it's visible. You have a predefined color (#EEE) for all of your "a:link, a:visited" at "http://yourdomain.com/wp-content/themes/ProPhoto_10/style.css" at line 3 and all links are inheriting that color so if you want to change the color for your widgets then add another color like
.widget ul li a:link, .widget ul li a:visited {
display: block;
text-decoration: none;
color: #333; /*or whatever you want*/
}
It's at line 345 in the same file.