I have a parent div in my code, and 2 child divs. I want that on hovering the first child, the second child to hide. I want to do that only with css or js.
Here's my Fiddle
<div class="parrent">
<div id="child1">
Hide child2
</div>
<div id="child2">
I must hide
</div>
</div>
Thank you!
Use this:
#child1:hover ~ #child2 {
visibility:hidden;
}
Demo
This uses the General sibling combinator ~
~ selector: The general sibling combinator selector is very similar to the adjacent sibling combinator selector we just looked at. The difference is that that the element being selected doesn't need immediately succeed the first element, but can appear anywhere after it.
You can also use the Adjacent sibling combinator +, depending on the rest of your code.
+ selector: An adjacent sibling combinator selector allows you to select an element that is directly after another specific element.
#child1:hover + #child2 {
visibility:hidden;
}
Demo
#child1:hover #child2 {
visibility:hidden;
}
This will not work as now you're saying that #child2 must be a child of #child1.
What you can do is this:
$(document).ready(function(){
$('#child1').hover(function(){
$('#child2').hide();
}, function(){
$('#child2').show();
});
});
Or use the CSS code:
#child1:hover ~ #child2 {
visibility:hidden;
}
You can use below jquery code:
$(document).ready(function(){
$('#child1').on('mouseover',function(){
$("#child2").hide();
}).on('mouseout',function(){
$("#child2").show();
});
});
Before doing this you should know how to refer to a sibling element of an element in CSS.
instead of the following syntax-
#child1:hover #child2
You need the following:
#child1:hover+#child2
Fiddle demo
N.B. Basically + is for a reference to a sibling
Reference
Related
I have a <header> with the class .header and [data-header-style="Standard"].
Now I want the <main> element of my page to have a padding of 100px, but only if the header has [data-header-style="Standard"].
Is this possible without Javascript? Thank you for the help!
I know that I can select the header with [data-header-style="Standard"].header, but unfortunately not how to do it with <main>.
I'm assuming your HTML looks something like this:
<header class="header" data-header-style="Standard">
...
</header>
<main>
...
</main>
You need the CSS general sibling combinator (~), which you can use like this:
[data-header-style="Standard"].header ~ main {
padding: 100px;
}
This selects all main elements that follow your header. In this case, it will select your main element and give it the 100px padding, but only if the header matches the first selector.
You can read more about the general sibling combinator on MDN. There's also an adjacent sibling combinator if you'll ever find that useful.
Suppose I have a DIV element whose id is mydiv.
<div id="mydiv">
<div></div>
<span></span>
<p></p>
</div>
I want to assign a CSS class to only those direct descendants of this div that are not span elements. So in the above example the class should be assigned only to the child div and p elements. How do I accomplish this using CSS (not Javascript)?
You can use :not:
#mydiv > *:not(span){
color: #f00;
}
JSFiddle
Note: You are not assigning a CSS class, you are applying a group of CSS styles to a particular selection.
You can't "add a class" with CSS, but you can select elements and apply style to them if that's what you mean.
#mydiv > :not(span) { /* apply style to direct descendants that aren't span */ }
https://developer.mozilla.org/en-US/docs/Web/CSS/%3Anot
So let's say I have a parent div element that has an img child and that I want to execute some code when the parent element is hovered.
<div class="parent">
<img src="link_to_some_image" />
</div>
The issue here is that when the child img is hovered, the parent "hover state" breaks. How can I make it so that the parent keeps its hovered state even if its child elements are hovered?
Here is an example jsfiddle, try hovering on the empty space and then on the image http://jsfiddle.net/omrf0dxe/
Thanks a lot!
Edit: The img children is an example, it might be other type of elements as well like divs,links etc
Edit2: Ok, apparently the solution was to use mouseleave instead of mouseout when binding the "exit" event.
You are listening to the events mouseenter/mouseout.
You want the events mouseenter/mouseleave:
Example Here
$(".parent").on("mouseenter mouseleave", function () {
$(this).toggleClass('hovered');
});
As an alternative, you could also add pointer-events: none to the child img element in order to essentially remove mouse events from the element:
Updated Example
.parent > img {
pointer-events: none;
}
Depending on what you're trying to achieve, you may not even need JS, though.
Just use the :hover pseudo class.
Example Here
.parent {
width:400px;
height:400px;
background:blue;
}
.parent:hover {
background:red;
}
Pretty basic solution, not sure if you want yours to stay toggled, but I would attack it with a add/remove class.
$('.parent').hover(
function(){ $(this).addClass('hovered') },
function(){ $(this).removeClass('hovered') }
)
http://jsfiddle.net/omrf0dxe/7/
I am creating some design part in HTML. I have two div. Both div element are generating through java script. First div has a class and second div has no any class or id. I want to apply style to second div.
<div class="class_name"></div>
<div style="display:block;"></div>
After applying style the second div style will be style="display:none;"
Please suggest.
You can have CSS only solution for this, there is no need to have a javscript for this you can try adjacent siblings selectors of CSS:
To target very next div you need this:
.FirstClassName + div{
/*your style goes here */
}
To target all divs in a parent after a given class name:
.FirstClassName ~ div{
/*your style goes here */
}
Demo
You can use :not selector for the second div:
div:not([class="classname_of_the_first_div_here"]){}
or even simpler :
div:not(.classname_of_the_first_div_here)
Assuming that there were no other div before the two div elements were created:
document.getElementsByTagName("div")[1].style.color = "blue";
use style attribute in the second div
<div id="div1" style="display:block;"></div>
if it has only two div's then use the last-child property.
yourparent div:last-child
{
your style
}
You basically have three options (maybe more, but then we need some code).
First one, use the element selector. but that means you're styling all elements of the same type on the page
div { background: red; }
Second option, style all divs that have no class attribute:
div:not([class]) { background: green; }
and last but not least, style a div that is a child of another element. If your document structure is build up properly this is most probably the way to go.
div.parent > div { background: blue; }
Checkout the Fiddle here
I am aware of the + selector that allows us to manipulate an adjacent element, but I'm looking to manipulate all of the elements rather than just one.
<article class="non-selected"></article>
<nav id="nav-below"></nav>
<article class="select-me"></article>
<article class="select-me"></article>
<article class="select-me"></article>
<footer class="dont-select-me"></footer>
In the example above I'm trying to select each of the article's with the select-me class. (I can't use a normal class selector).
Is this possible for jQuery?
Use the general sibling combinator:
.non-selected ~ .select-me {
color: red;
}
Example: http://jsfiddle.net/XFGfd/5/
You have to use ~ instead of +, all following elements will be matched
For exemple,
article.non-selected ~ article.select-me{} /* will select all articles having .select-me class that are siblings but after a article having the .non-selected element class */
Using jQuery
$('article.non-selected ~ article.select-me')....
jQuery: LIVE DEMO
$('#nav-below').nextUntil('.dont-select-me') // do something
http://api.jquery.com/nextUntil/
Or using CSS General sibling combinator (~): LIVE DEMO
#nav-below ~ article{
background:red;
}