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');
});
Related
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
Is there a difference between
ul#mainNav li a:active {
color: #0312a4;}
and
ul#mainNav li.active a {
color: #0312a4;}
? From what I can tell, they do the same thing.
Yes difference is there
ul#mainNav li a:active {
color: #0312a4;}
in this, active is a pseudo class. It will apply color to a when event happen like click and hold (Eg: link,visited,hover,active etc.. are pseudo classes and always starts with :)
and
ul#mainNav li.active a {
color: #0312a4;}
in this, active is a class.(color will apply to anchor tag when the parent element li tag with active class only.)
Yes, both are completely different. Do check below snippet that will show you difference. Click to first text so it will show green color to you.
a:active means when anchor tag is active and li.active a class "active" is set to li tag.
ul#mainNav li.active a {
color: red;
}
ul#mainNav li a:active {
color: green;
}
<ul id="mainNav">
<li><a>Click Here</a></li>
<li class="active"><a>Click Here</a></li>
</ul>
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>
This question already has answers here:
Closed 12 years ago.
Possible Duplicate:
How do I get this CSS text-decoration issue to work?
I'm using the jquery toggle effect to show or hide more information about list elements:
jQuery(document).ready(function($) {
$("ul p").hide();
$("ul li").addClass("link");
$("ul li").click(function () {
$("p", this).toggle(300);
});
});
which works fine with a structure like:
<ul>
<li>List element 1<p>Additional info 1</p></li>
<li>List element 2<p>Additional info 2</p></li>
</ul>
In order to make it look 'clickable' I'm styling .link with css:
ul li.link {
color: #0066AA;
}
ul li.link:hover {
text-decoration: underline;
cursor: pointer;
}
But I don't want the text that's revealed to look like a link so:
ul li.link p{
color: black;
text-decoration: none;
}
ul li.link p:hover {
cursor: text;
text-decoration: none;
}
But the <p> is still underlined (in blue) on hover, despite throwing text-decoration:none; in every free space! From what I understand this is because the child styles are applied on top of the parent so what I'm effectively doing is trying to put 'nothing' on top of an underline and have it disappear.
So my question (eventually!) is this: Is there any way to get rid of that underline without taking the <p> out of the <li> (which I don't want to do for other reasons)?
Can you control the markup? I'd wrap the text inside the <li/> in a <span/> and write the CSS to target just the span with text-decoration:underline;.
Really though the clickable area should be an <a/> element with an href of "#". Bind a click handler to the anchor instead of the li. Then you have more pseudo-selectors like a:visited to work with and the behavior of clicking it is documented. I'm not sure if p:hover is actually supposed to work in CSS. I know it is possible to bind to any element with jQuery, but with CSS I'd stick with an anchor element.
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; }