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
Related
I am trying to hide an element until its previous sibling is hovered over, in css (or scss rather), it looks like this:
.menu-container {
// style with flex etc...
& .menu-item-link {
// style the link...
&+.sub-menu-container {
display: none;
}
&:hover+.sub-menu-container {
display: block;
}
}
}
<ul class="menu-container">
<li class="menu-item-container">
<a class="menu-item-link">Ingredients</a>
<ul class="sub-menu-container">
<li class="sub-menu-item-container">
<a class="sub-menu-link">Fruits</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Vegetables</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Dairy</a>
</li>
<li class="sub-menu-item-container">
<a class="sub-menu-link">Children</a>
</li>
</ul>
</li>
</ul>
How do I achieve this using tailwind?
You're not actually trying to target a sibling in your code, you're trying to target a child element. This is a very simple process when you just want to show a sub-menu dropdown.
Just add group to the hover trigger (.menu-item-link in your case) and group-hover:[some-display-class] to the child. This way the child will change it's display property when the parent element (or itself) is hovered.
You should change your title, also I'd recommend that you don't use Tailwind with class names like that. Please see extracting components for the recommended way to use Tailwind CSS. Of course, you are free to use it how you want but you're better off with plain old CSS if you want to use SCSS and classes like that.
Example with your structure:
<ul>
<li class="group">
<a>Ingredients</a>
<ul class="hidden group-hover:block">
<li>
<a>Fruits</a>
</li>
<li>
<a>Vegetables</a>
</li>
<li>
<a>Dairy</a>
</li>
<li>
<a>Children</a>
</li>
</ul>
</li>
</ul>
Example on Tailwind Play https://play.tailwindcss.com/dFc2zlmqDA
I'm having trouble figuring out how to solve this CSS problem.
The code is create by a WordPress plugin so have limited possibilities when it comes to naming the classes and so on.
This is the code:
<li class="page_item page-item-365 page_item_has_children current_page_item has_children”>
<a href="http://www.xxx.dk/side1/side2/“>Side 2</a>
<ul class="children">
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
<li class="page_item page-item-556”>
<a href="http://www.xxx.dk/“>punkt 1</a>
</li>
</ul>
</li>
The problem is that all of my links become bold when I'm styling them. I only want it to happen on the current page (selected page). I have tried with the following CSS code, but without luck:
li.current_page_item a:first-child {
font-weight: bold;
}
I believe I found a solution - dont know if I understand it but it works ;)
.current_page_item > a {
font-weight: bold;
}
In your case, every a is the first child of a li.
What you are searching for is:
li.current_page_item a {
Furthermore all of your menu entries link to the same id. So I guess every of it get the "current" class, if one is selected. Add some other links to the menu and you will see, that it will work!
You were close to the solution ;-)
Have a look here, is this what you looking for?
li.current_page_item > a:first-child {
font-weight: bold;
}
Example on Codepen:
http://codepen.io/funkysoul/pen/XNVdbE
please recheck your code. refer the screenshot.
This is the code i'm using to make the pills in my navbar active..
<ul class="nav nav-pills">
<li class="<%= 'active' if current_page?(root_path) %>"><% yield (:home)%><%= link_to "Home", root_path%></li>
however it uses the default blue color as "active" how should i change this?
this is what i have in my css already
.nav>li>a:hover,
.nav>li>a:focus{
background-color: #5c8a36;}
even with this (the color should be green) it still shows up as the default blue color
Add the following line (.nav>li>a.active,) to your css:
.nav>li>a.active,
.nav>li>a:hover,
.nav>li>a:focus {
background-color: #5c8a36;
}
You don't have a <a> there!
.nav>li:hover,
.nav>li:focus,
.nav>li:focus {
background-color: #5c8a36;
}
<ul class="nav nav-pills">
<li class="">
Home
</li>
</ul>
The accepted answer didn't work for me. I changed a bit and now working.
.nav-pills>li.active>a,
.nav-pills>li.active>a:focus,
.nav-pills>li.active>a:hover {
background-color: #5c8a36;
}
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'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.