Imagine this kind of strucure :
<div class="background">
<div class="object"></div>
</div>
<div class="foreground"></div>
My foreground totally overlays my background
In my CSS I would like to change object property on hover (ie .object:hover{} )
Is there way to do that in CSS without moving my object inside foreground or using js ?
Update : My css as asked.
.background { background:url('background.svg') no-repeat; }
.foreground { background:url('foreground.svg') no-repeat 50% 50%; }
.object {
position: absolute;
top:10px;
left:10px;
opacity:1;
}
.object:hover
{
opacity:0.5;
}
The answer is kind of. You can use sibling selector (+), but you must revert order of your divs.
Example CSS:
.background {
position: absolute;
width: 600px;
height: 400px;
background-color: red;
}
.foreground {
position: absolute;
width: 300px;
height: 200px;
left: 150px;
top: 100px;
background-color: green;
z-index: 1;
}
.object {
width: 600px;
height: 400px;
}
.foreground:hover + .background .object {
background-color: blue;
}
and HTML:
<div class="foreground"></div>
<div class="background">
<div class="object"></div>
</div>
Working sample: http://jsfiddle.net/pBYwT/1/
Higher z-index for div:hover which you want to display on top.
Related
Consider the following code (fiddle):
$("*").on("click", function(e) {
console.log(e.currentTarget.classList)
return false
})
.bg {
width: 500px;
height: 500px;
background: lightblue;
position: relative;
}
.positioned {
width: 400px;
height: 250px;
background: green;
position: absolute;
top: 0;
left: 0;
z-index: 1;
}
.positioned_parent {
clip-path: inset(100% 0);
position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bg">
<div class="positioned_parent">
<div class="positioned">
</div>
</div>
</div>
I have used clip-path to remove .positioned_parent from view in the document. However it will still be the target of click events in Safari (but not Chrome).
I am looking for a way to use clip-path: inset() such that when I clip away a portion of an element the user will no longer be able to click on it. How can I accomplish this?
I have a wrapper box that I want to animate with transform translate but if I do this I can't use fixed element inside.
example :
<div class="wrapper">
<div class="box-content">
<div class="fixed-element">
</div>
</div>
</div>
<style type="text/css">
.wrapper {
transform: translateX(50px);
background: pink;
}
.box-content {
height: 1000px;
background: green;
}
.fixed-element{
position: fixed;
top: 0;
left: 0;
width: 50px;
height: 50px;
background: blue;
}
</style>
https://jsfiddle.net/aobv5azy/
I don't want use javascript, and I want use transform translate. Animate with "left" is not good for performances.
In the following html/css code:
<div class="blue">
<div class="red">
<div class="yellow">
1
</div>
<div class="yellow">
2
</div>
</div>
</div>
.blue { background-color: blue; height: 150px; width: 100px; margin: 100px; }
.red { background-color: red; height: 100px; width: 500px; margin-left: -50px; }
.yellow { background-color: yellow; height: 50px; }
I need to give .yellow the same width as .blue, but without using fixed px (as .blue is responsive and can change it's width) and without using position: absolute; as the two yellow must not overlap.
Expected result: http://jsfiddle.net/kPg97/3/
This doesn't work as it uses fixed px:
.yellow { width: 100px; float: left; }
This doesn't work as the first .yellow isn't visible:
.yellow { position: absolute; width: 100%; left: 0px; }
Probably with jquery, you can do like this :
$(document).ready(function(){
var width = $(".blue").width();
$(".yellow").width(width);
});
You can do without jquery, you may have understood though.
Please note a display:inline; and float:left were used. Hope they won't conflict with your interest.
Jsfiddle here
I have a vertical parent container div with fixed positioning and height in pixels. I have child divs with same width as the parent. How do i stack these child divs inside the fixed parent? I am uanble to get through. please help.
If you want to do it statically, just set each child div's top property how you want it.
So if those child divs are 50px in height
#child1{
position:relative;
top:50px;
}
#child2{
position:relative;
top:100px;
}
and so on
They should already be stacked. Could you elaborate on your problem?
HTML
<div id="container">
<div class="stack one"></div>
<div class="stack two"></div>
<div class="stack three"></div>
</div>
CSS
#container {
width: 250px;
}
.stack {
width: 250px; height: 100px;
}
.one { background: red; }
.two { background: green; }
.three { background: orange; }
jsFiddle
Updated -
After reading your reply, I've now updated the CSS - jsFiddle
CSS
#container {
position: relative;
width: 250px; height: 300px;
}
.stack {
position: absolute;
width: 250px; height: 100px;
}
.one { background: red; bottom: 0; }
.two { background: green; bottom: 100px; }
.three { background: orange; bottom: 200px; }
http://jsfiddle.net/cxwQF/12/.
Note: Red and green boxes should intersect. Green box is image or video. When hover it became yellow. But not on the bottom where the red box starts. Red box is control (for example, next image).
Question. How can I put parent div behind the image and child div to the top.
Markup:
<div id='image'></div>
<div id='parent'>
<div id='child'></div>
</div>
CSS:
#image {
position: relative;
width: 100%;
height: 500px;
background: green;
z-index: 2;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
}
/*#parent:hover {
background: blue;
} */
#child {
position: relative;
margin: 0 auto;
width: 100px;
height: 100px;
background: red;
z-index: 3;
}
How does this suit you? It's hard to know how to structure it without knowing what you are trying to achieve.
http://jsfiddle.net/cxwQF/21/
I've created another, invisible div for your 'child' but the original (foot) remains in the same place.
<div id='image'></div>
<div id='foot'>
</div>
<div id='parent'>
<div id='child'></div>
</div>
Sorry about the border styles its purely for test purposes.
I found the pure CSS solution. Markup remains the same.
CSS:
#image {
width: 100%;
height: 500px;
background: green;
}
#image:hover {
background: yellow;
}
#parent {
position: fixed;
bottom: 0;
width: 100%;
z-index: 1;
visibility: hidden;
}
#child:hover {
background: pink;
}
#child {
margin: 0 auto;
visibility: visible;
width: 100px;
height: 100px;
background: red;
}
Solution: #parent's "visibility" should be set to "hidden", #child's "visibility" should be set to "visible"
Fiddle is here: http://jsfiddle.net/cxwQF/22/