This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 5 years ago.
I want a div to disappear on hover over a different div, purely with CSS.
So I have two divs
<div class="" id="target">I will disappear</div>
<div class="hover_box">Hover me</div>
and my SCSS:
#target {
background-color: blue;
height: 100px;
width: 100px;
}
.hover_box {
background-color: red;
height: 100px;
width: 100px;
&:hover #target{
display: none !important;
/* background-color: green !important; */
}
}
However, it does not work. See here:
https://jsfiddle.net/ubLLga3q/3/
The problem is your HTML mark up. You are doing a hover and saying #target disappear. You can only use this method if you call a sibling/child. Right now #target is not a child from .hover_box.
<div class="box">
Hover me
<div class="hover_box">
</div>
</div>
.box {
background-color: blue;
height: 100px;
width: 100px;
}
.hover_box {
background-color: red;
height: 100px;
width: 100px;
}
.box:hover .hover_box {
display: none;
}
https://jsfiddle.net/ubLLga3q/6/
Related
I have three inline-block divs on my page (see JSFiddle):
Div #one contains a button 'Show' and is absolutely positioned so that it overlaps the div #two. When 'Show' is clicked, div #two slides out from under #one using translateX, like so:
When this happens, I would like to push div #three down so that it appears just below div #two, like so:
I'm not sure how to go about achieving this using pure CSS that doesn't involve moving #three along the Y-axis using #three { transform: translateY(...) }. I was wondering if translateX is the wrong approach here since it does not disturb the position of neighbouring elements, but I don't know what to use in its place.
As I have already stated in the comment section: It really depends on what your final goal is and what content you put in your divs - how everything is structured.
I feel like this is more of a XY-problem. I.e. the design-choice demands for a special case/solution that could be solved in another way so that the "hacky" solution does not have to exist in the first place.
Nevertheless, since you have asked for it I give you a solution for this specific problem:
const container = document.querySelector('.container');
const slide = document.getElementById('show');
const done = document.getElementById('hide');
const two = document.getElementById('two');
const right = document.querySelector('.right');
show.addEventListener('click', function() {
two.classList.add('show');
right.classList.add('shift');
});
hide.addEventListener('click', function() {
two.classList.remove('show');
setTimeout(function() {
right.classList.remove('shift');
}, 1000)
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
transform: translateX(0);
}
.right.shift {
clear: left;
display: block;
float: none;
transform: translateX(100px);
}
#one,
#two {
height: 100%;
}
#one {
background-color: lightblue;
position: absolute;
z-index: 1;
}
#two {
background-color: yellow;
transform: translateX(0);
transition: transform 1s;
}
#two.show {
transform: translateX(100%);
}
<div class="left">
<div id="one">
Click 'Show' to show panel 2
<button type='button' id='show'>Show</button>
</div>
<div id="two">
Click 'Hide' to hide panel 2
<button type='button' id='hide'>Hide</button>
</div>
</div>
<div class="right">Some other content</div>
Alternative
You could implement a spoiler section that you can toggle to display more information if it is desired.
const spoilerBtn = document.getElementById('spoiler-btn');
const spoiler = document.getElementById('spoiler');
spoilerBtn.addEventListener('click', function() {
spoiler.classList.toggle('show');
});
.left,
.right {
position: relative;
height: 200px;
margin-top: 5px;
display: inline-block;
border: 1px solid black;
float: left;
}
.left {
width: 100px;
}
.right {
width: 200px;
margin-left: 10px;
}
#spoiler {
background-color: tomato;
display: none;
}
#spoiler.show {
display: block;
}
<div class="left">Aside text here</div>
<div class="right">
Toggleable section: <button id="spoiler-btn">toggle</button>
<div id="spoiler">This content can be toggled</div>
<p>Some other content</p>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 5 years ago.
Improve this question
How can I transition between two divs without seeing the background of the page during the transition. In this example, I would expect just to see the numbers change:
https://jsfiddle.net/j2td4hd7/15/
The transition easing is set to linear.
This doesn't have anything to do with the easing, it's that you're unnecessarily transitioning both elements.
It's easy to overcomplicate this -- instead think of the two images as a stack: the one on the bottom can stay visible the whole time, only the one on the top needs to fade in and out.
Compare below:
goodswap = function() {
$('#div2').fadeToggle(); // transitions the top element in and out
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; display: none;}
#div3 { background-color: blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>
If the images are different sizes, this technique still works so long as the larger one is stacked with the higher z-index. To keep the rest of the page from jumping around, set the container's size to that of the larger image.
goodswap = function() {
$('#div2').fadeToggle(); // transitions the top element in and out
}
badswap = function() {
$('#div1, #div2').fadeToggle(); // transitions both elements in and out
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
.container { position: relative }
#div1 { background-color: red;}
#div2 { background-color: brown; width: 500px; display: none;}
#div3 { background-color: blue }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button onclick="goodswap()">Good fade</button>
<button onclick="badswap()">Bad fade</button>
<div class="container">
<div class="block-div" id="div3">(This is the page background)</div>
<div class="block-div" id="div1">1</div>
<div class="block-div" id="div2">2</div>
</div>
If you have two elements with black background and opacity of 50% on each of them - they are not combined into 100% black :)
Check the following:
div {
background: black;
width: 150px;
height: 150px;
position: absolute;
}
div.half {
opacity: 0.5;
left: 0;
top: 0;
}
div.full {
top: 0;
left: 150px;
}
<div class="half"></div>
<div class="half"></div>
<div class="full"></div>
During the animation - the opacity of the two elements is changing from 0 to 100 and from 100 to 0, but the background color is not "combined".
I think the following will provide what you are looking for:
window.swap = function(divId){
if(divId === 'div1'){
jQuery('#div1').css('zIndex', 1);
jQuery('#div2').css('zIndex', 2);
jQuery('#div2').fadeIn({easing: 'linear', complete: function() {
jQuery('#div1').fadeOut({easing: 'linear'})
} }
);
}else{
jQuery('#div2').css('zIndex', 1);
jQuery('#div1').css('zIndex', 2);
jQuery('#div1').fadeIn({easing: 'linear', complete: function() {
jQuery('#div2').fadeOut({easing: 'linear'})
}
});
}
}
.block-div {
position: absolute;
height: 200px;
width: 400px;
color: #fff;
font-size: 40px;
text-align: center;
}
#div2{ display: none; background-color: brown; }
#div1{ background-color: red; }
html, body{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="block-div" onclick="swap('div1')" id="div1">1</div>
<div class="block-div" onclick="swap('div2')" id="div2">2</div>
Note regarding comments from the OP:
In case you want the same effect with two elements that has different height, you can create two dummy div, one for each div you have. The dummy1 will be in the size of div1, but contain the bg of div2, and same for dummy2. now you can use these dummy divs to do the transition.
I wish to achieve this effect:
where a draggable will disappear below the edges of the container div.
I am not sure in which direction to head. At first I thought I should use css z-index but so far unsuccessful.
Is there a simple way to achieve it ? I intend to use it with jsPlumb but I don't think my question is limited to this library.
Here is a snippet with the problem. The blue rectangle is draggable, the grey area is my container, and the orange is the full page.
jsPlumb.bind("ready", function() {
jsPlumb.setContainer("conteneur");
jsPlumb.draggable(document.getElementById("item1"),{
});
console.log(document.getElementById("item1"));
});
#master {
background: orange;
position: relative;
z-index: 21;
padding: 20px;
}
#conteneur {
padding: 20px;
width:80%;
height: 200px;
border: 1px solid gray;
position: relative;
background: grey;
z-index:21;
}
#item1 {
left: 100px;
z-index: 12;
}
.node{
background: blue;
position: absolute;
width:20px;
height:30px;
}
<script src="https://rawgit.com/sporritt/jsPlumb/master/dist/js/jsPlumb-2.0.4-min.js"></script>
<div id="master">
<div id="conteneur" class="cont">
<div id="item1" class="node"></div>
</div>
</div>
If I'm understanding your question:
#conteneur {
overflow: hidden;
}
should do the trick.
This question already has answers here:
jquery animate .css
(5 answers)
Closed 8 years ago.
I have an element which I want to move from left to right that won't look like it "teleported".
I am using jQuery onClick on a button - when it's clicked - the div "#superDiv" has to move.
this is the code:
$('#mob-home-btn').click(function(){
$("#superDiv").css({left: 227, position: 'relative'});
})
I tried using CSS3 Transitions on my #superDiv which didn't make the trick.
Use .animate() to animate and marginLeft to push the div to its right.
$('#mob-home-btn').click(function() {
$("#superDiv").animate({
marginLeft: '227'
});
})
#mob-home-btn {
width: 70px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: magenta;
}
#superDiv {
width: 100px;
height: 100px;
background-color: coral;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="mob-home-btn">Click Me</div>
<div id="superDiv"></div>
Using CSS transitions, you can do it this way without any jQuery.
#mob-home-btn {
width: 110px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: magenta;
}
#superDiv {
width: 100px;
height: 100px;
background-color: coral;
transition: margin-left 1s;
}
#mob-home-btn:hover + #superDiv {
margin-left: 227px;
}
<div id="mob-home-btn">Hover Over Me</div>
<div id="superDiv"></div>
am trying to emulate this theme:
http://themetrust.com/demos/ink/?project=the-city-of-samba
But instead make the blog post always remain centered in the right hand side (space outside of the fixed sidebar) and have the blog post be of a % width.
I currently have this set up on my site, but am using a percentage based sidebar which looks awful.
Here is a JSfiddle recreating in basic terms the theme from above:
http://jsfiddle.net/Uyv6w/4/
All i am after is to make that grey inner div always remain centered inside the red content div.
Incase JSFiddle goes down and for future ref:
HTML:
<div id="container">
<div id="sidebar"></div>
<div id="content">
<div id="inner"></div>
</div
</div>
CSS:
* {
margin: 0; padding: 0;
}
html, body {
width: 100%;
height: 100%;
background-color: #333;
}
#container {
height: 100%;
width: 100%;
}
#sidebar {
height: 100%;
width: 100px;
background-color: #9b59b6;
position: fixed;
}
#content {
width: 100%;
background-color: #f00;
}
#inner {
width: 60%;
margin-left: 150px;
background-color: #888;
height: 1000px;
}
Thanks.
There are just 2 properties to change in ordre to make this work the way you want :
#content {
/* width: 100%; */
margin-left: 100px; /* the width of you sidebar.
Since #content is a div, a block-level element
, its width will be automatically 100%
, minus the margins */
background-color: #f00;
}
#inner {
width: 60%;
/* margin-left: 150px; */
margin-left: auto;
margin-right: auto; /* having margin-left & right set to auto will center your div.
you could also use "margin: 0 auto" */
background-color: #888;
height: 1000px;
}
I have updated you JSFiddle example here : http://jsfiddle.net/Uyv6w/5/
http://jsbin.com/requv/1/edit
if you set body, html (and the container) to height 100%, it will not be able to to scroll.
the height should be more then 100%.