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 */
}
Related
Please, don't confuse this question with others published on stackoverflow.
NOTE: Hide list with one element with pure CSS my question involves the parent tag.
I have these css rule:
ul {
padding: 5px;
}
ul > li:only-child {
display: none;
}
This rule hides the first ul tag when its only one.
But the space of the ul tag is still there.
How I can hide both ul and li when its onliy one li declared in my html?
The extra spacing you see even after hiding the li elements is because you have included a padding for the parent ul element.
So the solution is to remove the padding from the ul element and apply it on the child li elements.
I want to add image to every li, but I would like to display it only on mouse over.
However, I want to avoid 'moving' effect, which is consequence of new element (image) added to DOM. I tried to fix it with visibility:hidden, since that takes space, but without luck.
Here's the simple example, as you can see, on hovering these li's, they are moving on the right.
What is the simplest way to achieve this?
http://jsfiddle.net/UQAjh/
You'd want either position the :before pseudo element absolutely to prevent it from entering the layout flow when shown, or create the pseudo element independently from the :hover state at an opacity of 0 and set opacity to 1 when hovered.
Keeping :before out of layout flow
ul > li:hover:before {
/* all the other styles */
position: absolute;
left: 25px;
}
Fiddle: http://jsfiddle.net/marionebl/UQAjh/1/
Creating :before regardless of :hover state
ul > li:before {
/* all the other styles */
display: inline-block;
float: left;
opacity: 0;
}
ul > li:hover:before {
opacity: 1;
}
Fiddle: http://jsfiddle.net/marionebl/Nda6Z/1/
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.
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).