The selector #div1 p:hover + #div2 img is not working and I can not understand why.
Trying to make hover over an object in div 1 affect the CSS settings of the objects in div2 with only CSS. Please help.
I am using Chrome.
#div1 #x:hover + #div2 #y {
width: 200px;
}
<div id="content">
<div id="div1">
<p id="x">1234</p>
</div>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>
JSBin Demo
This does not work because your #div2 is not an adjacent sibling (actually not even a sibling) of the p tag. It is a sibling of the #div1.
The below is how your selector would be interpreted.
#div1 #x:hover + #div2 #y
When mouse is over (or hover) on an element with id='x' which is a child of an element with id='div1' select the element with id='y' under another element with id='div2' which is an adjacent sibling of the element with id='x'.
If you want to make the above selector work, your HTML should be changed like in the below snippet. Notice how in this example, the #div2 is an adjacent sibling of the #x.
#div1 #x:hover + #div2 #y {
width: 200px;
}
<div id="content">
<div id="div1">
<p id="x">1234</p>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>
</div>
Another option (if your #div1 has no elements other than #x) would be to put the hover on the #div1 itself like in the following snippet.
#div1:hover + #div2 #y {
width: 200px;
}
<div id="content">
<div id="div1">
<p id="x">1234</p>
</div>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>
If neither of the above can be applied then you would have to use JavaScript (or one of the various JS libraries like jQuery) to achieve what you need. Below is a sample with JavaScript (uses HTML5 classList feature but can easily be modified for non HTML5 compliant browser also).
In this sample, we add handlers for the mouseover and mouseout events on the #x element and toggle the .test class (which changes the width) of the #y element.
document.getElementById('x').onmouseover = function() {
document.getElementById('y').classList.add('test');
}
document.getElementById('x').onmouseout = function() {
document.getElementById('y').classList.remove('test');
}
.test {
width: 200px;
}
<div id="content">
<div id="div1">
<p id="x">1234</p>
</div>
<div id="div2">
<img id="y" src="http://img3.sprzedajemy.pl/540x405_obrazek-szyty-2901508.jpg" />
</div>
</div>
Related
I want to add/remove a class to an element (child of the same div is being clicked) for example, if the user press the #first element: The first element should now have 2 classes: .block .active. and the should now look red, But every other should remain intact. I've try the following (code below) nonetheless after I click on one block all of the blocks change their state and now all of them have both classes: .block .active.
Since I have a lot of blocks, If possible I don't want to use id selectors, just detect and apply the desired classes on the same parent div.
css
.block p{
color: blue;
}
.block.active p{
color: red;
}
html
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
jQuery
$(".block").click(function(){
$("block").closest( "block" ).toggleClass( "active" );
});
You were almost there. Instead of using .block & closest you can target the element being clicked with this.
In the below code, we are first removing the active class from all elements with class block and then applying the active class to the clicked element.
$(".block").click(function(){
$('.block').removeClass('active');
$(this).addClass( "active" );
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
if ( $(this).hasClass('active')) {
$(this).removeClass('active')
} else {
$('.block').removeClass('active');
$(this).addClass('active');
}
});
.block p{
color: blue;
}
.block.active p{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="block" id="first">
<p> Element in blue </p>
</div>
<div class="block" id="second">
<p> Element in blue </p>
</div>
<div class="block" id="third">
<p> Element in blue </p>
</div>
$(".block").click(function(){
$(this).toggleClass("active");
});
Is it possible to select a specific <div> when another <div> which is not a parent is :hover?
All that in HTML5/CSS3 only, without JS.
<section>
<div id=first></div>
</section>
<section>
<div class=second></div>
</section>
As an example, i want <div class=second> to show when <div id=first> is :hover.
This is possible, but only if the two elements have the same parent.
Using the element1 ~ element2 selector. For example:
HTML:
<div class="first">
<!-- content -->
</div>
<span class="example-element"></span>
<div class="second">
<!-- content -->
</div>
CSS:
.first:hover ~ .second {
/* styles */
}
If you need to select an element that does not have the same parent, you need to use javascript.
this is two ways to achive that, with click adding an a tag or with hover that its a little tricky
.second{
display:none;
}
#second:target {
display:block;
}
#first a{
text-decoration:none;
color:black;
}
.disp1:hover + .disp2{
display:block;
}
.disp2{
display:none;
}
<section>
<div id="first"><a href="#second" >div one</a></div>
</section>
<section>
<div id="second" class="second">div two</div>
</section>
<div class="disp1">first div</div>
<div class="disp1 disp2">second div</div>
My syntax looks like this:
<div class="parent">
<div class="child">content</div>
</div>
<div class="parent">
<div class="child">content</div>
</div>
<div class="parent">
<div class="child">content</div>
</div>
I want to style child elements which are siblings, like this:
.parent .child + .parent .child {
/* Some pretty nice styles */
}
Unfortunately this code not work. Does it possible with pure CSS3 or will be available only in future version 4?
Your question is unclear. Add more details. Check These Selectors
Child combinator
Adjacent sibling combinator
General sibling combinator
What your css means,
.parent .child + .parent .child {
/* Some pretty nice styles */
}
Parent with a child followed by another parent with a child. Style will apply to the 2nd parents child.
Ex:
.parent .child + .parent .child {
color: red;
}
<div class="parent">
a
<div class="child">
b
</div>
<div class="parent">
a
<div class="child">
b
</div>
</div>
</div>
<div class="parent">
a
<div class="child">
b
</div>
<div class="parent">
a
<div class="child">
b
</div>
</div>
</div>
Since parenthesis don't exist as such in css, it reads,
.parent .child + .parent .child
as "a child inside a parent immediately following a child inside a parent". So basically you're selecting :
<div class = "parent">
<div class = "child"></div>
<div class = "parent">
<div class = "child"></div>
</div>
</div>
As a previous commenter pointed out, a solution would be to alternate between parent1 and parent2 and select the divs with .parent1 + .parent2.
.parent + .parent .child{
background-color: red;
height: 100px;
width: 100px;
}
<div class="parent">
<div class="child">content</div>
</div>
<div class="parent">
<div class="child">content</div>
</div>
<div class="parent">
<div class="child">content</div>
</div>
This may work. Is that what you want? But it styles childs considering if the parents are following each other. So it doesn't really care about children.
If you really want to select only based on children you may consider a jquery solution (you didn't tag as jquery so...)
Using a checkbox for a css toggle, this code works... The div disappears when you click the checkbox...
input:checked ~ #test{display:none}
<div id="main">
<input type="checkbox">Click Me
<div id="test">This is a test</div>
</div>
But here, it doesn't work, because the TEST div is not a sibling, right? It's outside of the main div...
input:checked ~ #test{display:none}
<div id="main">
<input type="checkbox">Click Me
</div>
<div id="test">This is a test</div>
Is there a way to make this work with just css? I thought if I remove the ~ then any div with an ID = TEST would disappear no matter where it is, but that's not the case.
well this kind of works
the trigger is inside your main but the actual checkbox must be on the same level as "test"
#main {white-space:nowrap;}
#check {
display:none;
}
p {display:inline-block;}
.fake{
display:inline-block;
width: 10px;
height: 10px;
background:lightgray;
}
#check[type=checkbox]:checked + #main + #test {
display:none;
}
#check[type=checkbox]:checked + #main > label {
background: gray;
}
<input id="check" type="checkbox">
<div id="main">
<label class="fake" for="check"></label>
<p>Click Me</p>
</div>
<div id="test">This is a test</div>
I need to swap two elements by using css. My html is here:
<div class="container">
<div class="Div2">
<img src="Div2.jpg">
</div>
<div class="Div1">
<img src="Div1.jpg">
</div>
</div>
and my css is here:
.container{width:50%; margin:auto;}
.div2{float:left;width:100%;}
.div1{float:left;width:100%;}
is there any way how to put Div1 on the position of Div2 only with css without changing html?
Float .div2 to the right, and .div1 to the left:
.div2{ float:right; }
.div1{ float:left; }
You'll also have to remove the width: 100%; if you're attempting to stack them side by side.
Also, classes are case-senstive. In your example code, your div classes are .Div1 and .Div2, make sure to use all lowercase classes to match the definitions:
<div class="container">
<div class="div2">
<img src="Div2.jpg">
</div>
<div class="div1">
<img src="Div1.jpg">
</div>
</div>
Example: http://jsfiddle.net/dph8t/