Im trying to do something similar to this: CSS Menu - Keep parent hovered while focus on submenu
im using !important to override bootstrap colors
it works for the parent but i dont want the child li>a to be effected
.hover-li:hover a{
color: blue !important;
}
.hover-li ul li {
color: white !important;
}
the structure is like this:
<li class = "hover-li">
<a></a>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>
</li>
Try this
.hover-li:hover > a {
color: blue !important;
}
it only affects direct children
Related
Go an LI holding an <A> - for the a:active state I want to change the CSS applied to the parent <LI> holding it... but I Cant work out the syntax in CSS....? Sure its a simple solution...?
<li>link</li>
li { background-color: yellow; }
li a:active { color: red; }
Above makes the link red on mousedown, but how can I also make the background colour of the <li> red when <a> is in active state?
UPDATE - not possible in CSS. jQuery solution is below:
$('li a').mousedown(function(){
$(this).parent().addClass('makeMeYellow');
});
We're using a bootstrap page that we found for a menu that's displayed at the left. Then I added a menu at the top. The page basically looks like this.
The issue is that the following CSS that's supposed to affect the top menu is also affecting the menu at the left:
nav > ul > li:hover {
background-color: rgb(0,168,224);
}
This CSS is in a file menu.css that's supposed to be used exclusively by the top menu, but when I change the color, it changed both the top and left menu. It also occurs with other properties.
I tried adding !important; but that didn't do much.
I'm familiar with basic CSS, but this seems a little more complex.
What can I do so that any changes to hover (and any other properties) will only affect the top menu?
You have to write your css a bit more specific in order to style to top navigation.
For example, you can add an id to the top menu:
<nav id="topmenu">
<ul>
<li>item 1</li>
<li>item 2</li>
....
<ul>
</nav>
Your css should be this:
nav#topmenu > ul > li:hover {
background-color: rgb(0,168,224);
}
you should add class to tags which you want to affect and style by class names instead of tags.
Even if you have multiple stylesheets they can override one another if using the same names/elements. So instead of using
nav > ul > li:hover
You should make a class or id for your menus (optionally in menu.css)
So this could be for the upper menu:
.upperMenuLi:hover{
background-color: Yellow;
}
and for your side menu you could do the same, but with a different name, like;
.sideMenuLi:hover{
background-color: Grey;
}
The above code causes the top menu to have a yellow bg on hover, and the side menu to have a grey background on over.
so keep in mind:
By using nav > ul > li:hover that style will be applied to ALL elements following that order.
You want to limit the scope of you rules. nav > ul > li:hover selects a hovered li item that is a direct child of a ul which in it's case is a direct child of a nav element. The "problem" is this hierarchy is very common and might (and does) clash with other structures.
You have to create a selector which is uniqe. The easiest way, and IMO the most elegant way is to declare descriptive classes for this and select based on those.
For instance:
.navigation {
}
.navigation__list,
.navigation__list-item {
list-style: none;
margin: 0;
}
.navigation__list {
display: flex;
justify-content: spece-between;
padding: 0;
}
.navigation__list-item {
padding: 0 10px;
transition: all 0.3s;
}
.navigation__list-item:hover {
background-color: rgb(0,168,224);
}
<nav class="navigation">
<ul class="navigation__list">
<li class="navigation__list-item">Home
<li class="navigation__list-item navigation__list-item--active">About
</ul>
</nav>
Whats the difference of use CSS like this:
.mainHeader nav ul li {.....
compared with just this:
.mainHeader li {.....
It works fine with just the latter alternative. Since I don't have any other nav or ul in the mainHeader, I guess it's ok to just use the latter one?
What if you have HTML like this?
<div class="mainHeader">
<nav>
<ul>
<li>Menu item</li>
<li>Menu item
<ul><li>With submenu</li></ul>
</li>
</ul>
</nav>
</div>
Now, if you wanted to only style a "Menu item" and submenu items separately, the only way to do so specifically is with the following selectors:
.mainHeader nav>ul>li { /* menu item */ }
.mainHeader li>ul>li { /* submenu item */ }
Using the > combinator is important here, to ensure you are styling the right element. .mainHeader li alone will not do.
As long as you will never include any other matching elements, it's okay (where okay means "it will work"). A good approach is to add a class to your ul and select it that way:
ul.my-menu li {
/* CSS styles */
}
And - by the way - I guess mainHeader is not the tag name. If it is an identifier, you must use #mainHeader and .mainHeader if it is a class. (You changed it)
<div id="mainHeader">
<ul><li>facebook</li><li>twiiter</li></ul>
<div id="nav">
<ul><li>Home</li><li>About</li><li>Information</li><li>Contact</li></ul>
</div>
</div>
So #mainHeader li{....} will do all li in div
and #mainHeader nav ul li {....} will overwrite for the nav bar
Adding a class to each ul or adding > will make the code stronger when it is edited in future like suggested above.
The difference is only one thing, you can list any type of element next to .mainHeader for example, #mainHeader a p code div nav span ul li. This will give all of these elements with an ID of mainHeader the CSS you place in the { } for that element.
I'll give you an example.
HTML:
<div class="mainHeader">This text is black because "mainHeader".</div>
<a class="mainHeader" href="#">This text is black because "mainHeader".</a>
<p class="mainHeader">This text is black because "mainHeader".</p>
<nav class="mainHeader">This text is black because "mainHeader".</nav>
<span class="mainHeader">This text is black because "mainHeader".</span>
CSS:
.mainHeader div a p nav span {
color: #000;
}
Update(1): Please understand that doing this is recommended if you are going to give multiple elements the same aspect for a specific thing. An example of this usage, say you want div a p to have the same color, you would achieve this by div a p { color: #000; /* color your wanted */ }
I have menu like that
<ul id="menu">
<li>
Home
</li>
<li class="menu-selected">
Results
</li>
</ul>
I want to make menu item selected after it was clicked. I set li class "menu-selected"
But no luck.
.menu-selected ul#menu li a //also i was trying to say a:link but no luck
{
background-color: #91c05e !important;
text-decoration: none !important;
color: #fff !important;
}
Any ideas?
ul#menu li.menu-selected a
is what you want to do
I'm pretty sure you want
ul li.menu-selected a
instead, since that applies to all links inside <li> elements with class menu-selected.
do:
ul#menu li.menu-selected a
From left to right it's parent -> child element
You probably only need .menu-selected a
I have a <li> that contains an <a href>
<li>Page</li>
I'd like to change the background color and text color of each <li> item as it's hovered over. I found that the background color is best changed by targetting the li:hover and not the a:hover because the a:hover changes the background of only a small portion of the line (the part that has the <a> text).
li:hover { background-color:green; }
What I'd also like to do is change the font color (that's the <a>). When I do it the first way below, it has no effect on the <a> text color. And when I do it the second way below, I'd have to hover specifically on the <a> for the font color to change, not just anywhere in the <li> bullet line.
li:hover { background-color:green; color:red; } //first way
a:hover { color:red; } //second way
Is there a way with css to change the font color of the contained <a href> when the <li> is hovered over? again, this is what the html markup looks like:
<li>Page</li>
li:hover a { color: red }
:hover documentation.
IE5/6 only support :hover on links, so make sure you're not testing on those browsers.
The way that works on IE6 is to still target the link, but make the link fill the whole of the space inside the <li>:
li a { display: block; }
li a:hover { background-color: green; }