I have implemented an off-canvas menu. I want to make the whole <li> change color on hover but only the text are changing color. How can i do so?
PLease check the full code here:
https://jsfiddle.net/nia24/u7gLwx49/
There's no class menu in the fiddle, so:
<ul id="toggle" class="menu">
And be aware of space between li and :hover:
.menu li:hover{
background: #00ff99;
}
Now, it works: https://jsfiddle.net/u7gLwx49/1/
You can use like this:
.menu li:hover a {
color: #FFFFF;
}
Text will change color when hover is on li element
Related
I have a site with a bunch of anchor elements, and I'm trying to make them have a black background with white text on hover. Each anchor tag is wrapped in li. Funny thing is, only some anchor elements change their style on hover, and some don't. For example, the first three menu items in the menu change the text color, but the rest doesn't change the color. The background color works for every item. This is my code:
a, a:visited {
color:black;
text-decoration:none;
cursor:pointer;
}
a:hover,
a:hover span{
color:white !important;
background:black;
text-decoration:none;
}
<div id="navblock">
<ul class="nav fullwidthnav">
<li> NEW ARRIVALS</li>
<li>HOUSE LABELS</li>
<li>KNITS</li>
<li>TOPS</li>
<li>DRESSES</li>
<li>BOTTOMS</li>
<li>OUTERWEAR</li>
<li>SHOES</li>
</ul>
<div class="clearit"></div>
</div><!-- #navblock -->
a:visited is your culprit.
It is not being overridden by a:hover because it is both visited and hover so would need to be a:visited:hover which will work in modern browsers but possibly not IE compatible.
A question to ask may be do you really need a "visited" style? Is that something users really need?
I used -webkit-text-fill-color instead of just color, and now it works.
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 a ul, with three li inside it. the first li text is "opptakskrav" and the last li element is "ja". Anyone know why the text on my second li doesnt use the whole width and why it starts a new line halfway?
<ul class="admission infoUl">
<li class="head">Opptakskrav</li>
<li>Kravet for opptak til bachelorgraden er normalt generell studiekompetanse.</li>
<li> ja</li>
</ul>
this is the only css:
.infoUl {
padding-left:35px;
}
.infoUl li.head {
font-weight:bold;
}
It looks like there is a width set on the ul or li. Maybe a style is being inherited from a different stylesheet. Is there another set of styles that is making the text sans-serif with a grey background?
I have menu which the active item has an active class on load, which changes its background.
The hover of other items change the background of hovered item.
<ul>
<li></li>
<li class="active"></li>
<li></li>
</ul>
<style>
li:hover, li.active {background:black}
</style>
Is there any way to remove active class background on other items hover in pure CSS. something like:
li.hover .active {background:none}
This works if active is under li, but doesn't work here.
This isn't reliably possible with CSS, as CSS can only affect elements that appear later in the DOM, not previously, so hovering over the first li can affect the current li.active element with the following CSS:
li:hover ~ li.active {
background-color: #f00; /* or whatever */
}
JS Fiddle demo.
But hovering over the third li cannot affect the same li.active element.
However, the following would work:
ul:hover li.active {
background-color: transparent;
}
JS Fiddle demo.
Try this:
ul:not(:hover)>li.active { background: black; }
ul>li.active:not(:hover) { background: none; }
This has a few conditions:
A browser which supports the :not pseudo-tag
The ul must not have too much padding or empty space, otherwise you could activate the :hover of the ul without hovering over any lis
This worked for me :
.dvchange1 {
color:#fff;
}
.dvOne:hover .dvchange2 {
color:#000;
}
<div class="dvchange1 dvchange2">
<span class="">
Hello
<span>
</div>
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; }