i have a ul(parent) inside which another ul is there. I have given style to the child ul using the following code when hovering on the parent ul
ul:hover>ul{
}
This gives style to the child ul when hovering on the parent ul. Now I want to give style to the parent ul when hovering on the child ul?
Is there any posible way?
As of now, there is nothing like that in CSS. The spec for CSS4 Selectors does include the subject selector, which would allow you to solve this problem like that:
!ul > li:hover { ... }
For now you'll have to use Javascript if you can't avoid this problem.
A jQuery way to do it:
$('ul').on({
mouseenter: function() {
$(this).parent('ul').addClass('ishovered');
},
mouseleave: function() {
$(this).parent('ul').removeClass('ishovered');
}
});
With that you could use the .ishovered class to style your parent list via CSS.
Related
I'm trying to get an item that is a pseudo element to change when the parent is hovered over. The pseudo element here is .child:after. I know this works:
.parent:hover .child {
background: #FF0000;
}
But this does not seem to work:
.parent:hover .child:after {
background: #FF0000;
}
Any ideas? Thank you!!
Try to add content:'' to ::after pseudo-class;
Also be aware that :after works with non-replaced elements (im, input, textarea, and so on) (refference: replaced elements.)
Additionally: pay attention to display property of .child:after selector.
Here you go with a working example https://jsfiddle.net/wq2edhf3/.
Does CSS support conditions? I mean that there is hover, so when mouse is on it, element style changes.
I have class ".menu_top_line" with display:none, can I change it to "display:block", when mouse is on other element?
Like:
nav ul li:hover
{
background-color:#FFF;
// other block.display:block
}
There is no way to reference another element from inside a ruleset.
If you can write a selector that matches the element you want to manipulate which also references the element you want to hover, then you can just apply the :hover to that element in the selector.
nav ul li:hover > .menu_top_line {
display: block;
}
Otherwise you need JavaScript.
You can do it for a child element, descendent or an immediately next sibling.
You can use (>)-operator to select any immediate child element space( ) for descendent element and (+)-operator for an immediately next sibling element.
Let me show you the sibling selection similar to the answer given by #Quentin i.e. for child selection only.-
nav ul li:hover + .menu_top_line {
display: block;
}
this will address those elements with class menu_top_line that follows a li that is child of a ul that is child of a nav-element.
So there are 3 means to achieve what you want.
It is possible but only if the element you are targeting the "mouse is over some other element" condition to is some child (or grandchild) of the element you're holding the mouse over.
ul li a {
/* normal */
}
ul:hover li a {
/* a's style when the mouse is over the ul */
}
I have twp elements inside my Div,both have same class name. I want to hide my first element with the class name .cart. I am using the below code.
.component-bottom .component-basket + .cart{
display:none;
}
<div class="component-bottom">
<div class="component-basket">
<div class="cart">
</div>
<div class="cart">
</div>
</div>
</div>
Am I using the correct code?
You can use a direct child selector for the .cart element:
.component-bottom .component-basket > .cart
{
display:none;
}
Now you only want the first element of this selector. There isn't an original selector for this, but you can make a overwrite selector for this.
You can overwrite all but the first one ElementA ~ ElementB:
.component-bottom .component-basket > .cart ~ .cart
{
display:block;
}
This search for all .cart elements inside .component-basket where ANY previous adjacent sibling is .cart. The first of the element doesn't have a previous sibling of this class, so it would not be selected.
This is called a general sibling selector.
jsFiddle
This should support IE7 and above:
Note Requires Windows Internet Explorer 7 or later.
source: http://msdn.microsoft.com/en-us/library/ie/aa358824(v=vs.85).aspx
an easier solution commented by #jrConway:
Make it display: block by default and use:
.component-bottom .component-basket > .cart:first-child
{
display: none;
}
Example
Note that this only work when you use ONLY .cart as child element. Whenever an other class is at the first 'place' it will not work.
Using adjacent sibling selector won't work here, as your element is nested inside .component-basket and hence it fails.. Simple way is to call a class on the element you want to hide, if you cannot change the DOM than you can use first-child or nth-of-type(1)
.component-bottom .component-basket div.cart:nth-of-type(1) {
display:none;
}
Demo
As #Vucko already commented, nth-of-type() is a CSS3 spec pseudo..
Hence if you want to support legacy browsers, you can use Selectivizr,
this will save you a lot of classes/ids.
Stick this in your CSS file:
.hide {
display: none;
}
Then add that class to whatever element you want hidden like so:
<div class="component-bottom">
<div class="component-basket">Foo</div>
<div class="component-basket cart hide">Foo</div>
</div>
The advantage of this method is that you get to re-use that "hide" class anywhere you want.
As understood, check this might help
CSS
.cart{
display:none;
}
.component-bottom .component-basket
{
//some common properties
}
HTML
<div class="component-bottom">
<div class="component-basket cart">component-basket Hidden div</div>
<div class="component-basket">component-basket visible div</div>
</div>
This will hide the div with the cart class (the First div)
Thanks,
Dhiraj
For the given example:
<div class="menu">
<div class="menu_top">Menu1<div class="sub_menu">SubMenu1</div></div>
<div class="menu_top">Menu2<div class="sub_menu">SubMenu2</div></div>
<div class="menu_top">Menu3<div class="sub_menu">SubMenu3</div></div>
</div>
How can I change the display property for the respective childs elements?
I was trying the solution:
.menu_top .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
But all the "sub_menu" are shown when the mouse is over any "menu_top".
You want to display the .sub_menu when hovering over .menu_top?
.menu .menu_top:hover .sub_menu {
display: block;
}
The selector should be .menu_top:hover if you only want to display the respective child .sub_menu on hover.
See it in action - http://jsfiddle.net/spBJH/
You just need a minor change i think.
You have .menu:hover instead of .menu_top:hover
try this instead:
.menu .sub_menu{
display: none;
}
.menu_top:hover div.sub_menu{
display: block;
}
Try:
.menu_top:hover div.sub_menu {
display:block;
}
5.6 Child selectors
A child selector matches when an element is the child of some element. A child selector is made up of two or more selectors separated by ">".
The following rule sets the style of all P elements that are children of BODY:
body > P { line-height: 1.3 }
The following example combines descendant selectors and child selectors:
div ol>li p
It matches a P element that is a descendant of an LI; the LI element must be the child of an OL element; the OL element must be a descendant of a DIV. Notice that the optional white space around the ">" combinator has been left out.
You've got them switched.
.menu:hover = { do something when I hover over .menu }
I think what you want is:
.sub_menu:hover { this }
I have nested ul/li's and the problem is that if you add a background color to the top li, because there are nested items within it the whole list appears to have this background color rather than just the top li (I assume this is because it's extending the height of the top li).
Is it possible to only apply the background color to the top li?
I hope this makes sense!
There is the relationship selector > which means "immediate children":
ul > li {
background-color: <your color>;
}
but I have had problems with cross-platform compatibility while using it. What you can also do is set up multiple levels of rules:
ul li {
background-color: <your color>;
}
ul li li {
background-color: none;
}
You're speaking of the top li, but I think you mean the root li, which has child elements containing li elements as well. In that case, you can set the background color as follows:
.myroot>ul>li { background-color: Yellow }
Note: the sample above requires a wrapper element (usually a DIV) with the class name "myroot".
See this article for more about CSS child selectors.
What I understand is that you have a UL with LI in it (let's call it 'parent'), and that LI also has a UL with LI (let's call them child) in it? You apply the background to the parent and it's also visible under the child?
As the child are located INSIDE the parent they must change his height, so the background is bigger than tought, there is 2 way to block that, you could (as mentionned earlier) put another background the the child, or you could put something like a SPAN inside the parent and put the background on the SPAN instead of the LI.parent.
well you can always apply a different background colour to the child li's.
use jquery and give a special class to the first li
`$("ul li:first")`.addClass('special_bg')
= get only the first <-li-> element of the <-ul->
This depends on your CSS. You could define a top-level li class and use that to set the background colour.
Children always inherit attributes from the parents; that's why it's called Cascading Style Sheets.
I suggest to give all li elements a default background color and just override it for the top level elements (for example with a special class).