I have a list menu in Asp.net MVC Razor engine Masterpage. While trying some CSS on the menu, i see that the a:active property doesn't work as it should. I have cross check for reference on w3schools but still can't figure it out.
Following is the HTML on master page :-
<div class="nav">
<ul>
<li>Electronics</li>
<li>Computers</li>
<li>Clothing And Accressories</li>
<li>Office</li>
<li>Sports</li>
</ul>
</div>
Here's the CSS code :-
.nav ul li a:link { text-decoration:none; color:#3C7777; font-weight:bold; }
.nav ul li a:visited { text-decoration:none; color:#3C7777; }
.nav ul li a:hover { text-decoration: underline; color: #B5B5B5; }
.nav ul li a:active { text-decoration:none; color:#B5B5B5; }
Question :- The selected link is not show in the correct color, #B5B5B5, Why ??
Just to make sure you're not missing something - The :active pseudo-class only applies while you are clicking the link, and holding down the mouse button. It will not work after a page reload. (Just making sure, as it's a common mistake to make)
Related
Is there a difference between
ul#mainNav li a:active {
color: #0312a4;}
and
ul#mainNav li.active a {
color: #0312a4;}
? From what I can tell, they do the same thing.
Yes difference is there
ul#mainNav li a:active {
color: #0312a4;}
in this, active is a pseudo class. It will apply color to a when event happen like click and hold (Eg: link,visited,hover,active etc.. are pseudo classes and always starts with :)
and
ul#mainNav li.active a {
color: #0312a4;}
in this, active is a class.(color will apply to anchor tag when the parent element li tag with active class only.)
Yes, both are completely different. Do check below snippet that will show you difference. Click to first text so it will show green color to you.
a:active means when anchor tag is active and li.active a class "active" is set to li tag.
ul#mainNav li.active a {
color: red;
}
ul#mainNav li a:active {
color: green;
}
<ul id="mainNav">
<li><a>Click Here</a></li>
<li class="active"><a>Click Here</a></li>
</ul>
I want to implement 2 color variations in hyperlinks in particular div. Is it possible?
CSS:
.postfull a:link, a:hover {
color: #D80003;
text-decoration:none;
}
.ext a:link, a:hover {
color: #036C0C !important;
text-decoration:none;
}
HTML:
<div class="postfull">
<p>
Marseille port is one of the most important it adapted to the rough challenges presented by the changes of the different era to become of the most important assets in the <a href="#" >Mediterranean Basin</a>.
</p>
</div>
Yes it is possible. But in your case you have a little syntax error. In the below code you have applied the child element of .ext class. But In your code it is not a child. It is sibling element.
.ext a:link, a:hover {
color: #036C0C !important;
text-decoration:none;
}
So update your code like below.
.ext + a:link, .ext + a:hover {
color: #036C0C !important;
text-decoration:none;
}
Little Demo
Please replace .ext a:link, a:hover with .ext:link, .ext:hover code:
.ext:link, .ext:hover {
color: #036C0C !important;
text-decoration:none;
}
I'm trying to show the current page link in a different color. I've found other answers that will do this, but its still not working. I'm using a class of current_link on the respective links of each page. I also found an answer that said to apply the !important tag to the color rule but that didn't do anything. I'm thinking I have something small wrong or that I'm not aware of. Maybe some kind of ordering rule.
Here's the CSS rules relative to my links. As you can see I have .current_link at the top (I figured this would get rid of any ordering/over riding issues). The relative HTML naming will follow.
.current_link {
color: #00AD26;
}
#main_nav a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
#main_nav a:hover {
text-decoration: none;
color: #A8EDFF;
}
#main_nav a:active {
text-decoration: none;
color: #00B7FF;
}
a:link, a:visited {
text-decoration:none;
color: #00A3E6;
}
a:hover, a:active {
text-decoration: none;
color: #00B7FF;
}
Relative HTML from one of the pages.
<ul id="main_nav" class="grid_5 prefix_9">
<li id="home" class="current_link">Portfolio</li>
<li id="about">About</li>
<li id="contact">Contact</li>
</ul>
Your .current_link matches the <li>.
The <a> inside the <li> overrides the color it inherits from its parent element.
You need to apply the color to the <a> itself, either by moving the class or by changing the selector to select <a> elements inside the <li>.
Also, lower rules override earlier ones (if they have the same specificity).
Try this:
.current_link a {
color: #00AD26 !important;
}
You should use:
#main_nav li.current_link a {
color: #00AD26;
}
This will overrule the other selectors and avoids using !important.
I am developing a menu bar. I amm done but left with the hover action. I am looking for the whole background of the menu to change but the menu background only changes behind the text.
Here is the fiddle.
<div class="nav">
<ul>
<li >Zardari</li>
<li>Kutta</li>
</ul>
</div>
Here is the css,
.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px; padding-left:10px;}
.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
}
.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .active{background:#454545}
.nav ul a:hover{
color:#FFF;
background:#000;
}
Thanks in advance.
Put your padding:10px on your a tag, not the .nav. This way you'll have the entire link area change color from top to bottom. (You also have to add display: block; to your a as well.
.nav a{
color:#fff;
text-decoration:none;
font-style:italic;
margin-right:10px;
padding:10px;
display: block;
}
Fiddle
I think i achieved what you want by using Jquery.
I edited the css in order to remove your attempt of changing the background, that i implemented in Jquery.
CSS:
.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px; padding-left:10px;}
.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
}
.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
then in the head of your html file include the Jquery library. You can download it and host it on your server or use Google's CDN for the library, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
Now in your HTML body add the jquery functions i coded for you:
$("li").mouseover(function () {
$(".nav").css("background-color","#000");
});
$("li").mouseout(function () {
$(".nav").css("background-color","#454545");
});
The background of the nav bar changes when the mouse hover on the li (each button). If this is what you want, it's alright, else if you want something different let me know and i'll change it.
Here you can find a DEMO on jsfiddle
What about this?
.nav{background:#454545;line-height:1;overflow:hidden;position:relative; padding-top:10px;padding-bottom:10px; padding-left:10px;}
.nav a{
color:#fff;text-decoration:none;
font-style:italic;
margin-right:10px;
}
.nav i{position:relative;top:-3px}
.nav li{float:left;overflow:hidden}
.nav ul{list-style:none;margin:0;overflow:hidden;padding:0;width:100%}
.nav .item{display:block;font-family:Oswald,Arial Narrow,Arial,Helvetica,sans-serif;font-size:15.6px;line-height:1;padding:5px 8px;text-transform:uppercase}
.nav .item:hover{background:#454545;color:#FFF}
.nav .active{background:#454545}
.nav:hover{
color:#FFF;
background:#000;
}
I have a menu:
<div id=menu>
<ul=navigation>
<li><a href=>Home</a></li>
</ul>
</div>
With the sliding doors technique I want to create my button (containing rounded corners at the bottom.)
I can get this to work, by hovering the a and the li. But the li is bigger, and if I hover over the li, without hovering the a, only the background image for the li shows.
Now I'm wondering if there is a way to connect the hover of the li and the hover of the a within css. I rather fix this problem without using javascript.
Googleing didn't helped me further. I'm guessing this isn't possible, but I wanted to be sure before trying other options.
Thanks in advance for any advice/help/suggestions.
From what I gather you cannot do what you are after in the way you have described it.
However what I would do is make the "a tag" display as block and set the width and height to fill the "LI" that way you can use a:hover and change the whole bg which makes it look like the LI is changing
li a {
background:#000 url(images/bg.png) no-repeat 0 0;
display:block;
height:20px;
width:100px;
}
li a:hover {
background:#fff url(images/bg.png) no-repeat 0 -20px;
}
also use some padding to sit the text in the right place within the "LI" and remove any padding from the "LI"
li:hover is not supported without JS in older versions of IE so using a:hover instead provides better cross browser compatability
You can do this simply with:
<div id=menu>
<ul>
<li><a href=>Home</a></li>
</ul>
</div>
Then in your CSS:
#menu ul li:hover{
background-image:url(newimage);
}
If you require IE6 compliance, just make your links fill the entire width of the UL's.
#menu ul li a:link, #menu ul li a:visited{
display:block;
width:999px; <-- enter pixels
height:999px; <-- enter pixels
}
then modify the background image normally with:
#menu ul li a:hover{
background-image:url(newimage);
}
#menu li {
/* normal li style */
}
#menu li a {
/* normal a style */
}
#menu li:hover {
/* hover li style */
}
#menu li:hover a {
/* hover a style */
}
Will not work with IE6...