I'm wanting the text in the navigation bar to display a different color when the user is on that page so the user knows where they are. I can get this to work in all the browsers with just a single page, but things get funny when I start working with the children pages. In Chrome the parent page, a placeholder link (active4) responds but so do all the children pages (active4a-c), in both IE and Mozilla the individual child page (active4a) responds but the parent page (active4) doesn't. The CSS for these classes are in an internal style sheet so once you leave the page the links revert to the style in the external style sheet.
<li class="active4" ><a href="#" >Reviewers</a>
<ul>
<li class="active4a">Reviewer Information</li>
<li class="active4b" ><a href="#" >How</a></li>
<li class="active4c"><a href="#" >Future</a></li>
</ul>
</li>
.active4 a:visited {
color:#6206F7;
}
.active4a a:visited {
color:#6206F7;
}
I don't think the :visited pseudo-selector is what you want. This selects the <a> tag after it has been visited even once. So, once a visitor clicks on the link, it will always be the new color. Instead, try creating an active class that only selects <a> elements that are children. Here is some working code:
<!doctype html>
<html>
<head>
<style>
a:link {
color:blue;
}
a:visited {
color:blue;
}
.active > a:link {
color:red;
}
.active > a:visited {
color:red;
}
</style>
</head>
<body>
<ul>
<li class="active" ><a href="#" >Reviewers</a>
<ul>
<li class="active">Reviewer Information</li>
<li><a href="#" >How</a></li>
<li><a href="#" >Future</a></li>
</ul>
</li>
</ul>
</body>
</html>
The one thing I want to point out is the > between the .active and the a:link. This selects only <a> tags that are children of the .active. If you omit this, it will select all descendents which will lead to the problem you were having earlier.
Related
Here is example for my code
<style>
.hover:hover,.active{color:red}
</style>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
If you mouse over on blog, there will be two red words
i am trying to find a way to disable "home" when you mouse over any other word
and then it back red if you moved the mouse away
After long search with google, i finnally found javascript code
And tried to modify it to work, but no luck
Here is a pure CSS solution, that will work so long as you have a wrapper element for there li's, which you should.
<style>
.menu:hover .active {
color: black;
/*reset the color to the default*/
/*you could also use color: inherit*/
}
.hover:hover,
.active,
.menu:hover .active:hover {
color:red
}
</style>
<ul class="menu">
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
One thing I am noticing right off is the improper markup
there is no
that may not have anything to do with it.
<style>
.hover:hover,.active{color:red}
</style>
<ul>
<li class="hover active">Home</li>
<li class="hover">blog</li>
<li class="hover">about</li>
<li class="hover">port</li>
<li class="hover">contact</li>
</ul>
not exactly sure what you are trying to do
here is a fiddle http://jsfiddle.net/happymacarts/tfqw93tk/
maybe paste the js code you found and see if we can figure out your issue
Myself in the beginning stages of javascript want to achieve the following.Say I had some li tags which are further included with some li tags like this.
<ul>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
<li>
<ul>
<li class="2"></li>
<li class="2"></li>
<li class="2"></li>
</ul>
</li>
</ul>
Now class 2 block is hidden originally in the page.My work is when someone hovers on a link of class 1 its respective block ( i.e., class 2) should display.But the code i had written is displaying all blocks having class 2
May be i can write a mouseover() function for each link of class 1,but is it correct?I had seen this type effect in some sites like linked in,awwwards.com
Example link is
Best Colorful Websites | Web Design Inspiration
In this link when mouse is hovered on a image,then for only on that image a symbol is display on corner bottomI want this type effect.
Can any please help me??Thanks in advance??
Well this can be achived with css only:
ul ul{
display:none;
}
ul > li:hover ul{
display:block;
}
try a fast css solution (not tested because you did not put a jsFiffle code axample)
ul li:hover ul li.2
{
display:block;
}
also, do not use only numbers in class names... will not work on some browsers
try class="c2" at least
Situation, such a menu:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
When I hover "LANGUAGES" I need to show up the other :
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
Necessary to make it work on CSS, JQuery or without JavaScript. Here's a version does not work:
.hover_top_right_menu {
display: none;
}
It's a wrong line
.top_right_submenu: hover, hover_top_right_menu {
display: visible;
}
You have some typos in your css
by default the element .hover_top_right_menu should have display: none. When you hover the submenu then you change its display (with display: block).
.hover_top_right_menu {
display: none;
}
.top_right_submenu:hover .hover_top_right_menu {
display: block;
}
Anyway this css is based on the assumption that the language list is nested into .hover_top_right_menu element, e.g.:
<ul class="top_right_menu">
<li class="top_right_submenu"><i class="fa fa-globe"></i> LANGUAGES
<ul class="hover_top_right_menu">
<li>ENGLISH</li>
<li>SPANISH</li>
<li>RUSSIAN</li>
<li>GERMAN</li>
</ul>
</li>
<li>HELP</li>
<li>LOGIN</li>
</ul>
As a side notes:
Unless you need to have an action on click event, the link around "LANGUAGES" is not necessary for the example
you're using empty markup, probably for styling purpose only. If you need to have an icon just place it as a background of that list-item (or as content property of its :before pseudoelement)
I have an auto generated Wordpress menu that's created the following:
<li class="page_item page-item-23 page_item_has_children">
Main item 1
<ul class="children">
<li class="page_item page-item-52498 current_page_item">
Item 1
</li>
<li class="page_item page-item-52496">
Item 2
</li>
<li class="page_item page-item-52477">
Item 3
</li>
</ul>
</li>
I want to say when I'm on the first sub item, highlight the main li.
This is the CSS I'm using (ideally this would be more simple but due to the nature of the auto generated menu it's a bit messy!):
.page-item-52498.current_page_item li.page-item-23 a {
color:white!important;
font-family:'Museo Sans W01 500'!important;
}
At the moment this doesn't make the first li a white.
That CSS selector doesn't work. You cannot select the .page-item-23 as a child of .page-item-52498, as it is a container for the other in the markup structure.
Have you tried outputting the page ID using the body_class function of WordPress? Then you could try using a selector such as body.page-id-52498 li.page-item-23 a or similar.
The body_class function is used as such (most probably in the header.php template file of WordPress):
<!-- <head> somewhere above -->
<body <?php body_class(); ?>>
<!-- rest of the template somewhere below -->
It should output something similar to this (with a dynamic ID number of course):
<body class="page page-id-112 page-template logged-in admin-bar">
Whenever you've used body_class and it outputs the specific page ID you've declared in the CSS selector I wrote above it will take effect (following standard cascading rules of course).
One for the future - the subject selector should be arriving in CSS4. It's going to be very powerful but easy to abuse I think.
Syntax
!subject > selector {
/* declarations */
}
Example
!ul > li {
border: 1px solid green;
}
Scrolling down to the Parent Selector: http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/
And http://css4-selectors.com/selector/css4/subject-of-selector-with-child-combinator/
<div id='cssmenu'>
<ul>
<li class='active '><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>About</span></a></li>
<li class='has-sub '><a href='#'><span>Contact Us</span></a>
<ul>
<li><a href='#'><span>Contact 1</span></a></li>
<li><a href='#'><span>Contact 2</span></a></li>
</ul>
</li>
</ul>
</div>
I want this "HOME" keep inactive just like "ABOUT" and "CONTACT US" if I didn't touch it by my cursor.
I want each one of them to be activated and turn to blue after my cursor goes exactly at the menu.
Please Help :)
Thank You.
Every class you need to use
a {
//any styles
color:gray;
}
a:hover
{
//any styles
color:blue;
}
a:visited
{
//any styles
}
for ex:
active a
{
}
active a:hover
{
}
active a:visited
{
}
There are three selectors for <a> tag:
a:link {}
a:visited {}
a:active {}
You can make all of them same style and on hover a:hover make different style. try example on w3schools.
The :link selector is used to select unvisited links.
The :visited selector is used to select visited links.
A link becomes active when you click on it. The :hover selector
is used to select elements when you mouse over them. And it's used not only for <a> tag.
take a look at jsfiddle.