It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center.
Closed 10 years ago.
CSS:
// Highlight to show that the user is viewing current tab.
// css for the active tab
.HeaderTabs li.tab a {
display: block; //anchor tab
padding: 12px 8px 12px 8px;
}
.HeaderTabs li.tab a:link {
outline: none; //link works
text-decoration: none;
}
.HeaderTabs li.tab a:hover { //this works hovering over the text
color: #A4C639;
font-weight: bold;
}
.HeaderTabs li.tab a:active { //this doesnt work
color: #A4C639;
font-weight: bold;
}
:active selector comes in action when the element is active, for example when you keep an element clicked, the styles will apply, if you want to style your current active tab you need to use jQuery or server side programming for that, you can't style your current active tab by just using :active selector
More Reference
I think you might be confusing what 'active' means. ':active' in CSS refers to the state of the link when it's clicked (which can be a matter of milliseconds in some browsers). If you want to make the tab that refers to the current page look different, you'll need to add some kind of selector to it and style that differently.
The active state is set on a link when the user is clicking on it. Once the user releases the click the link is no more active. If you change the color of the active link (different color than the hover state) you will see the difference.
You should add your own "selected" class to the link once the tab is effectively selected either using JavaScript or on server-side.
I think :active only works the moment you click on the link, when you mouseUp it's not "active" anymore.
If you want that tab to keep on a color, just define another class.
.activeTab {
color: #A4C639;
font-weight: bold;
}
and throught javascript or jquery add that class to the tab.
This pseudo-class matches any element that’s in the process of being activated. It would apply, for instance, for the duration of a mouse-click on a link, from the point at which the mouse button’s pressed down until the point at which it’s released again. The pseudo-class does not signify a link to the active, or current, page—that’s a common misconception among CSS beginners.
Read This
li class="current"
.HeaderTabs li.tab a.current {
color: #A4C639;
font-weight: bold;
}
Additionaly comments in CSS are not done with //, thats Javascript. Use /* Cooment */
EXAMPLE
HTML/MARKUP
File = index.html
<ul>
<li class="current"><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = abouts_us.html
<ul>
<li><a href="index.html"</a>Home</li>
<li class="current"><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = news.html
<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li class="current"><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = products.html
<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li class="current"><a href="products.html"</a>Products</li>
<li><a href="contact_us.html"</a>Contact Us</li>
</ul>
File = contact_us.html
<ul>
<li><a href="index.html"</a>Home</li>
<li><a href="about_us.html"</a>About Us</li>
<li><a href="news.html"</a>News</li>
<li><a href="products.html"</a>Products</li>
<li class="current"><a href="contact_us.html"</a>Contact Us</li>
</ul>
STYLES/CSS
li.current
{
color: #A4C639;
font-weight: bold;
}
Aditionally you may need to give the class="current" to the <a> instead of the <li> and use
a.current
{
color: #A4C639;
font-weight: bold;
}
Related
I've been trying to write better CSS, I've seen some Harry Roberts conferences and read about the BEM methodology.So by now what I understand in general is that:
You should keep things modular and reusable
Make custom general classes and avoid nesting
Never use ID's (or almost never)
My question refers to the second one: in the case of a list, let's say I want to edit the color for both the normal and :hover state. Should I add a custom class to each <li> element or a custom class to the <ul> and refer to the <li> inside it?
Here is an example to better illustrate what I mean.
<h3>Custom class for ul</h3>
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
<h3>Custom class for li</h3>
<ul>
<li class="list__element">One</li>
<li class="list__element">Two</li>
<li class="list__element">Three</li>
<li class="list__element">Four</li>
</ul>
<style type="text/css">
.list li {
color: black;
}
.list li:hover {
color: red;
}
.list__element {
color: black;
}
.list__element:hover {
color: red;
}
</style>
When you're using BEM, try applying classes to EVERY element. That way you are dealing with the same level of specificity across the board, and you won't have to deal with priority orders.
So to answer your question, having .list__element:hover is exactly what you want.
I provided a more elaborate example, to demonstrate modularization. Notice how I added a new module "utensils".
Hope this answers your question!
.kitchen {
&__utensils {
}
}
.utensils {
&__utensil {
&:hover {
}
}
}
// this gets compiled to
.kitchen
.kitchen__utensils
.utensils
.utensils__utensil
// that is exactly what you want because you are avoiding specificity. Which means you will never have to fight with your selectors, which means you will never have to use important tags.
<div class="kitchen">
<ul class="kitchen__utensils utensils">
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
<li class="utensils__utensil"></li>
</ul>
</div>
see, i build my own website using just html and css. I'm figuring out most things on my own but i can't find a way to solve this problem, i guess because of my limited knowledge. I have this simple list:
<ul class="nav">
<li>HOME</li>
<li>GALLERY</li>
<li>PARKING</li>
<li>DOGS</li>
<li>ABOUT</li>
</ul>
I now want to change the appearance of the third item when it is clicked, therefore i somehow need to identify it, so i can stylize it like below:
.nav > li > a {
text-decoration:none;
font-size: 20px;
color: #ffffff;
}
Like in this example above, i want to stylize the appearance, but not for all items, just for one.
Can you help me out? Sorry if i wasn't clear enough..
I'd add a class to it and style based on that. No reason to get super specific with selectors here.
<li>Parking</li>
Then in your CSS you can do:
.parking:active {
...
}
You can use the :nth-child pseudo-class with the :active pseudo-class to target the third list item link:
.nav > li:nth-child(3):active > a {
text-decoration: none;
font-size: 20px;
color: #ffffff;
}
<ul class="nav">
<li>HOME
</li>
<li>GALLERY
</li>
<li>PARKING
</li>
<li>DOGS
</li>
<li>ABOUT
</li>
</ul>
Please help solve the problem, because my ideas have been exhausted...(
I have a :
<nav class="nav_editor" ng-show="status.editorMenuOn">
<ul class="menu_editor">
<li class=""><a ng-href="/articles/user/{{ status.userID }}">My Articles</a></li>
<li class="">Create Article</li>
<li class="">Comments</li>
</ul>
</nav>
And a CSS classes:
.menu_editor li a {
color: rgb(125,125,125);
font-size: 1.25vw;
margin-right: 20px;
text-decoration: none;
}
I want to make highlighting the item in the menu when this page is active (not pseudo ":active"), just when someone watching current page, for example "My Articles".
I have tried about 3 variants by CSS/HTML only, JavaScript and jQuery, but it is either not working properly or not working at all.
Please help solve this problem.
Thank you in advance!
When the myArticle page loads, just do jquery addClass method.
$(document).ready(function(){
//remove highlighted menu buttons on pageload
$(".menu_editor li").removeClass("activeMenuItem");
//add class only to the specific one
$(".foo").addClass("activeMenuItem");
});
I have the following problem:
I have a ul with blue list item text and a blue custom bullet. Now if the user clicks a li the text should be black and the custom bullet as well.
The text is easy to change, but i don't know how i could do it, that the custom bullet also stays black.
When the user hovers trough the menu the custom bullets and the text turns black. This is already working. But if the user is on a page, as soon he leaves the hover area the bullets turn blue again. This shoud not be the case.
Here is what i have already:
<ul class="listMenuItem--s">
<li class="listMenuChild">
Dienstleistungen
<ul class="sub-nav">
<li>Treuhand & Finanzen </li>
<li>Wirtschaftsprüfung</li>
<li>Unternehmensberatung / Nachfolge</li>
<li>Pensionierungs-, Vorsorge- und Steuerplanung</li>
<li>Informatik</li>
</ul>
</li>
<li class="listMenuChild">
Über uns
</li>
<li class="listMenuChild">
Publikationen
</li>
<li class="listMenuChild">
Hilfsmittel
</li>
<li class="listMenuChild">
Kontakt / Lageplan </li>
</ul>
And here the CSS.
.listMenuChild {
list-style-image: url("../img/bg_li.png");
margin-top: 5%;
}
.listMenuChild:active {
list-style-image: url("../img/bg_li_h.png");
}
.listMenuChild:hover {
list-style-image: url("../img/bg_li_h.png");
}
Is it because :active and :hover don't work together?
Any help much appreciated
:active means "While being clicked on or otherwise activated" (e.g. a focusable element would also be activated while you press the Enter key when it has a focus). Note while, not after.
It doesn't seem to have any effect for you because you never activated it without also hovering it (and your hover rule comes after the active rule).
It sounds like when you say "When the list item is active" you mean "When the link inside the list item has an href attribute that resolves to the URL of the current page". That isn't something you can express with CSS.
Use server side code to add a class to the list item based on the page you are loading and target that class with CSS.
If you have an :active class on a non-focussable item like <li>, it works only during mousedown. If you need to make it work without :hover, make it focussable using tabindex.
<li class="listMenuChild" tabindex="0">
The above code is only for it to stay. i.e., Currently the browser applies :active for only mousedown event. So that occurs only when you are having both :hover:active pseudo class:
.listMenuChild:hover:active {backgkround: #999;}
As you are using pages for each item you could create another class, add it to the list item for each page where that list item is to be highlighted for that page:
.listMenuChild {
list-style-image: url("../img/bg_li.png");
margin-top: 5%;
}
.listMenuChildActive {
list-style-image: url("../img/bg_li_h.png");
}
.listMenuChild:hover {
list-style-image: url("../img/bg_li_h.png");
}
HTML example:
<ul class="listMenuItem--s">
<li class="listMenuChildActive">
Dienstleistungen
<ul class="sub-nav">
<li>Treuhand & Finanzen </li>
<li>Wirtschaftsprüfung</li>
<li>Unternehmensberatung / Nachfolge</li>
<li>Pensionierungs-, Vorsorge- und Steuerplanung</li>
<li>Informatik</li>
</ul>
</li>
<li class="listMenuChild">
Über uns
</li>
<li class="listMenuChild">
Publikationen
</li>
<li class="listMenuChild">
Hilfsmittel
</li>
<li class="listMenuChild">
Kontakt / Lageplan </li>
</ul>
Try swapping these two lines:
.listMenuChild:hover {
list-style-image: url("../img/bg_li_h.png");
}
.listMenuChild:active {
list-style-image: url("../img/bg_li_h.png");
}
Remember this mnemonic phrase:
LoVe and H Ate
The 4 pseudo-selectors:
a:link // **L**ove
a:visited // Lo**V**e
a:hover // **H**ate
a:active // H**A**te
If they are not in that specific order, they probably will not work correctly.
https://css-tricks.com/remember-selectors-with-love-and-hate/
I've managed to put a great looking menu togheter!`
<li class="huvudmenu">Framsida</li>
<li class="huvudmenu">
<a>Om oss</a>
<ul>
<li>Styrelsen</li>
<li>Historik</li>
<li>Stadgar</li>
<li>Topeliuspriset</li>
<ul>
<li>HTML</li>
<li>CSS</li>
</ul>
</li>
</ul>
</li>
<li class="huvudmenu">Verksamhet
<ul>
<li>Hangö seminariet</li>
<li>Årsberättelser</li>
</ul>
</li>
<li class="huvudmenu">Estholmen</li>
<li class="huvudmenu">Bli medlem</li>
`http://jsfiddle.net/hx6uvc19/ The setup I have does not, unfortunatley, work very well on touch screen devices. Is there any way I can keep the design while making it touch screen compatible?
Thanks!
You can not use the :hover pseudo class on mobile. In order to get this effect you can use JQuery as stated by #jbutler483 in the comments.
If you wanted to do this you could do it by adding an .active class to the main li's (By using the class .huvudmenu) on click/touchstart and add this to the css where you have your hover styles as well.
This is the JQuery:
$('.huvudmenu').on('click touchstart', function(e){
e.preventDefault();
$(this).toggleClass('active').siblings().removeClass('active');
});
and the styles to add are:
nav ul li.active > ul {
display: block;
}
and
nav ul li.active:after {
width: 100%;
background: #404040;
}
this will then allow the styles on click and touchstart events. If you wanted this to only run on mobile you could just remove the click and use touchstart events and/or put some kind of detection that this is a mobile device before initialising the JQuery function.
Here is an update to your fiddle: http://jsfiddle.net/lee_gladding/hx6uvc19/3/