I want to change the css of parent on hover of Child element.
<ul id="main-menu">
<li>
<a href="#">
<i class="fa fa-building-o" aria-hidden="true"></i>
Private Limited
<i class="fa fa-caret-down"></i>
</a>
<ul class="submenu">
<li>Company</li>
<li>Contact</li>
<li>Industry</li>
</ul>
</li></ ul>
What i want is if i hover on li of submenu, li of main-menu get highlighted.
As already mentioned there is no parent selector but if you recognise that you are already hovering over the parent you can achieve what you want.
A rough example:
#main-menu > li:hover > a
{
background-color: #F00;
}
#main-menu > li > .submenu > li:hover
{
background-color:#00F;
}
<ul id="main-menu">
<li>
<a href="#">
<i class="fa fa-building-o" aria-hidden="true"></i>
Private Limited
<i class="fa fa-caret-down"></i>
</a>
<ul class="submenu">
<li>Company
</li>
<li>Contact
</li>
<li>Industry
</li>
</ul>
</li>
</ul>
As other posts say there is no parent selector.
This is how it should work:
li:has(> i:hover) { /* styles to apply to the li tag */ }
What this does is check if li has a i with :hover state in it. If that's the case it applies the css. Unfortunately this is not supported yet..
There is currently no way to select the parent of an element in CSS.
If you want trigger a child element with a child element use this.
.triggerDiv{
display:none;
}
.child:hover ~.triggerDiv {
display:block
}
<div class="main">
<div class="parent">
<div class="child">
<p>Hello</p>
</div>
<div class="triggerDiv">
<p>I'm Here</p>
</div>
</div>
</div>
Here you can go..
For Apply CSS..
$("#main-menu li").mouseover(function()
{
$("#main-menu a:eq(0)").css({'color':'blue','font-weight':'bold'});
});
For Remove CSS..
$("#main-menu li").mouseout(function()
{
$("#main-menu a:eq(0)").removeAttr("style");
});
[link]
(https://jsfiddle.net/aj23whnb/)
Related
On the top of my page I have a navigation with some items ligned horizontally. When I first go on the page it is not horzontally, instead its vertically arragend. What ever when I reload the page it is normal again.
This is my navigation:
HTML:
<nav id="menu"> <i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<a href="#home">
<li>Home</li>
</a>
<a href="#services">
<li>Services</li>
</a>
<a href="#work">
<li>Work</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</ul>
</nav>
CSS:
header nav ul li {
margin-left: 25px;
float: left;
}
header nav ul li:hover {
padding-top: 3px;
}
I already tried:
header nav ul li {
margin-left: 25px;
display: inline-block;
}
...which works fine, but when I hover then all items are going down instead of just the one I hovered.
Its hard to explain my issue but you might get the same when visiting the page:
my page I use google chrome browser.
When you've got further question just ask
Thank you
Just try this HTML code once..
<nav id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<li>Home</li>
<li>Services</li>
<li>Work</li>
<li>Contact</li>
</ul>
</nav>
Please try using anchor-tags inside the list(li) tags.
Try with this code. It will help you.
header nav ul li {
margin-left: 25px;
float: left;
}
header nav li {
display: inline-block;
}
header nav ul li:hover {
padding-top: 3px;
}
<html>
<head>
<title></title>
</head>
<body>
<header>
<nav id="menu">
<i class="fa fa-bars" aria-hidden="true"></i>
<ul>
<a href="#home">
<li>Home</li>
</a>
<a href="#services">
<li>Services</li>
</a>
<a href="#work">
<li>Work</li>
</a>
<a href="#contact">
<li>Contact</li>
</a>
</ul>
</nav>
</header>
</body>
</html>
I have this (simplified) navigation:
.ctmenu {
display: none;
float: right;
}
li:hover > .ctmenu {
display: inline-block;
}
<ul class="menu">
<li>
<span class="ctmenu">CT Menu</span>
Main page
<ul class="menu sub">
<li>
<span class="ctmenu">CT Menu</span>
Sub page
</li>
</ul>
</li>
</ul>
When I hover an li, the direct child .ctmenu should be visible. That works, but I only wan't the element that the mouse is currently on to show .ctmenu. When I hover "Sub menu", .ctmenu for "Main page" is also visible, because I'm hovering that too.
I'd prefer a CSS-fix only, but javascript/jQuery can be okay.
EDIT:
I made a little mistake in my first example that I can see from the answers is important:
The .ctmenu is before the a in the structure and with a float:right, so I can't use the a + .ctmenu selector. Is there an equivalent the other way around?
You need to add one extra div after LI tag. Please check below example
.ctmenu {
display: none;
float: right;
}
.ct-div:hover > .ctmenu {
display: inline-block;
}
<ul class="menu">
<li>
<div class="ct-div">
<span class="ctmenu">CT Menu</span>
Main page
</div>
<ul class="menu sub">
<li>
<div class="ct-div">
<span class="ctmenu">CT Menu</span>
Sub page
</div>
</li>
</ul>
</li>
</ul>
Try This:
.ctmenu { display: none; }
li a:hover + .ctmenu, .ctmenu:hover { display: inline-block; }
<ul class="menu">
<li>
Main page<span class="ctmenu">C Menu 1</span>
<ul class="menu sub">
<li>
Sub page<span class="ctmenu">C Menu 2</span>
</li>
</ul>
</li>
</ul>
Try This:
.ctmenu { display:none }
li a:hover+.ctmenu,
.ctmenu:hover {
display: inline-block;
}
<ul class="menu">
<li>
Main page
<span class="ctmenu">Demo 1</span>
<span class="ctmenu">Demo 2</span>
<span class="ctmenu">Demo 3</span>
<span class="ctmenu">Demo 4</span>
<ul class="menu sub">
<li>
Sub page
<span class="ctmenu">Demo 1</span>
<span class="ctmenu">Demo 2</span>
<span class="ctmenu">Demo 3</span>
<span class="ctmenu">Demo 4</span>
</li>
</ul>
</li>
</ul>
If the HTML structure doesn't change, you can do it with JavaScript, because there is no parent selector in CSS.
With the usage of mouseover, mouseout and classList, you can do something like:
var menu = document.querySelector(".menu");
var items = menu.querySelectorAll("li");
[].forEach.call(items, function(item) {
item.addEventListener("mouseover", function(e) {
e.stopPropagation();
this.children[0].classList.add("active");
});
item.addEventListener("mouseout", function(e) {
e.stopPropagation();
this.children[0].classList.remove("active");
});
})
.ctmenu {
display: none;
float: right;
}
.active {
display: inline-block;
}
<ul class="menu">
<li>
<span class="ctmenu a">CT Menu</span>
Main page
<ul class="menu sub">
<li>
<span class="ctmenu b">CT Menu</span>
Sub page
</li>
</ul>
</li>
</ul>
This question already has answers here:
css selector for first list item
(3 answers)
CSS selector for first element with class
(23 answers)
Closed 4 years ago.
I,m a beginner in programming. I'm trying to build a portfolio from scratch. In my navbar I want to select the first link to color it differently. Can anyone tell me the best possible way to select the first link from the unordered list?
<ul id="main-nav">
<li>
<a href="#" class="nav-links">
<i class="fas fa-home"></i>Home</a>
</li>
<li>
<i class="fas fa-info-circle"></i>About Me
</li>
<li>
<i class="fas fa-image"></i>Portfolio
</li>
<li>
<i class="fas fa-envelope"></i>Contact
</li>
</ul>
Keep in mind that to recolor the link, you want to not only select the first <li> element, but also the <a> inside it (as links don't automatically inherit the color of their parent element).
li:first-child a {
color: red;
}
<ul id="main-nav">
<li>
<a href="#" class="nav-links">
<i class="fas fa-home"></i>Home</a>
</li>
<li>
<i class="fas fa-info-circle"></i>About Me
</li>
<li>
<i class="fas fa-image"></i>Portfolio
</li>
<li>
<i class="fas fa-envelope"></i>Contact
</li>
</ul>
CSS :first-of-type Selector
The :first-of-type selector matches every element that is the first child, of a particular type, of its parent.
Example:
.myNav {
width: 200px;
}
ul {
list-style: none;
}
li {
padding: 5px;
border-radius: 6px;
margin-top: 4px;
}
li:hover {
background: red;
color: #fff;
cursor: pointer;
}
li:first-of-type {
background: red;
color: #fff;
}
<div class="myNav">
<ul>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ul>
</div>
This question already has answers here:
HTML tree full width hover effect
(3 answers)
Closed 6 years ago.
I need to create a tree structure using html and css.
Structure should be like this.
Current css and html for this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
li.active{
background: #B7E9FB!important;
}
<ul>
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.1</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.2</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.3</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.4</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder active">
<a href="javascript:void(0);">
<span>TEST1.5</span>
</a>
<div class="nested-list">
<ul style="display:block">
<li class="drag-folder">
<a href="javascript:void(0);">
<span>TEST1.6</span>
</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
This structure can have n number of nodes.
Problem:
nested elements width is less than root element width because of left padding (applied padding to display hierarchy), so on hover background color changes only for that particular width.
I want to make width of all li element to 100% of root element so on active background color will change for 100% width of display area, but need to maintain hierarchy.
I would like to have css solution for it.
Thanks in advance.
You can change your CSS like this:
ul{
list-style: none;
}
ul li{
background: #F4F4F4;
}
ul li a{
display:block;
}
li.active a{
background: #B7E9FB!important;
}
Example here: http://jsfiddle.net/wsAK2/
Hello I have this html code:
<ul class="sidebar-nav">
<li class="sidebar-top"></li>
<li class="active">
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-home"></i>Dashboard<i class="fa fa-angle-down"></i>
<ul id="dashboard" class="collapse">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-signal"></i><span>Charts</span><i class="fa fa-angle-down"></i>
<ul id="charts" class="submenu collapse">
<li>Action
</li>
<li>Another action
</li>
<li>Something else here
</li>
<li>Separated link
</li>
</ul>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-users"></i><span>Users</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-calendar-o"></i><span>Calendar</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-gamepad"></i><span>Services</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-gears"></i><span>Options</span>
</div>
<div class="menu-arrow"></div>
</li>
<li>
<div class="shadow-container">
<div class="menu-indicator"></div>
<i class="fa fa-envelope"></i><span>Email</span>
</div>
<div class="menu-arrow"></div>
</li>
</ul>
and the following css rule:
.sidebar-nav > li > div > a > span:first-letter {
font-weight:bold;
}
and here is the span element being inspected with chrome:
media="screen"
.sidebar-nav > li > div > a > span:first-letter {
font-weight: bold;
}
As you can see bold has no effect on it and I can't understand why ?
same happens in firefox too.
The problem is, that the :first-letter doesn't work on inline-element(such as span e.g), but on block/inline-block elements (e.g. p, table caption, table cell, etc).
Therefore it's better to apply :first-letter to a p instead of a span.
p:first-letter {font-weight: bold;}
If you really need that :first-letter selector on the span, you can still add display:block to the span
.sidebar-nav > li > div > a > span { display: inline-block; }
:first-letter does not appply to inline elements.
.sidebar-nav > li > div > a > span {
display: inline-block;
}
.sidebar-nav > li > div > a > span:first-letter {
font-weight:bold;
}
Per MDN:
A first line has only meaning in a block-container box, therefore the
::first-letter pseudo-element has only an effect on elements with a
display value of block, inline-block, table-cell, list-item or
table-caption. In all other cases, ::first-letter has no effect.
An easy way to fix this is to change your span displays to inline-block:
span {
display:inline-block
}
jsFiddle example