I've got an absolutely positioned menu above a parent that has a hover state.
I'm looking for a way to make it so that hovering over the menu won't trigger the parent's hover state.
.row {
height: 52px;
background: #F4F3D9;
width: 100%;
position: relative;
}
.row:hover {
background: black;
}
.menu {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
z-index: 500;
}
<div class="container">
<div class="row">
<div class="menu">
Hovering me should not make the row black
</div>
</div>
</div>
Thanks!
You can use a bit of Javascript to tell the mouseover event on the .menu not to propagate on its parent. Here is an example:
document
.querySelector('.menu')
.addEventListener('mouseover', e => { e.stopPropagation() })
.row {
height: 52px;
background: #F4F3D9;
width: 100%;
position: relative;
}
.row:hover {
background: black;
}
.menu {
height: 100px;
width: 100px;
background-color: green;
position: absolute;
z-index: 500;
}
<div class="container">
<div class="row">
<div class="menu">
Hovering me should not make the row black
</div>
</div>
</div>
Related
I have a container which has a sticky element that sticks to the top, within the container, there's also a position absolute element at the bottom. I only want the sticky element to be sticky up to the point when it reaches the bottom element.
My solution requires knowing the bottom element height in order to reserve a min-height for the sticky element to be sticky.
Is there a way to do it without know the height of the bottom position absolute element?
.container {
height: 1000px;
}
aside {
background: palegoldenrod;
height: 600px;
width: 300px;
position: relative;
}
.stickyWrapper {
min-height: calc(100% - 100px);
}
.sticky {
position: sticky;
top: 0;
}
.stickyItem {
background: pink;
height: 100px;
color: #000;
}
.bottomThing {
position: absolute;
bottom: 0;
height: 100px;
background: blue;
color: #fff;
width: 100%;
}
<div class="container">
<aside>
<div class="stickyWrapper">
<div class="sticky">
<div class="stickyItem">
sticky item
</div>
</div>
</div>
<div class="bottomThing">
position absolute
</div>
</aside>
</div>
I've worked out a solution by using flexbox. I will also no longer need the bottom element to be position absolute.
.container {
height: 1000px;
}
aside {
background: palegoldenrod;
height: 600px;
width: 300px;
position: relative;
display: flex;
flex-direction: column;
}
.stickyWrapper {
flex-grow: 1;
}
.sticky {
position: sticky;
top: 0;
}
.stickyItem {
background: pink;
height: 100px;
color: #000;
}
.bottomThing {
height: 100px;
background: blue;
color: #fff;
width: 100%;
}
<div class="container">
<aside>
<div class="stickyWrapper">
<div class="sticky">
<div class="stickyItem">
sticky item
</div>
</div>
</div>
<div class="bottomThing">
position absolute
</div>
</aside>
</div>
I have 2 div's, one after the other. When i move first div with postion: relative and top: -60px it creates gap between them.
Here is example: https://codepen.io/dusannis/pen/oNgBpoK
As you can see there is gap between red and yellow div. Is there some css property that I can add to parent div that can remove this gap, or something simillar?
This is HTML:
<body>
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
</body>
This is CSS:
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
position: relative;
top: -50px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
Use negative margin instead of relative positioning.
body {
background: blue;
padding: 60px
}
.div-1 {
padding: 60px;
/* position: relative; --> not required */
margin-top: -50px;
/* change this */
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
<div class="container">
<div class="div-1">
<p>something here</p>
</div>
<div class="div-2"></div>
</div>
Codepen Demo of the effects of various methods of "moving" elements:
"Relative Position vs Margin vs Transform".
You can try add same top/position to the second div:
.div-1 {
padding: 60px;
position: relative;
top: -60px;
background: red;
}
.div-2 {
position: relative;
top: -60px;
height: 50px;
background: yellow;
}
Alternatively you can add internal div and use padding for that one, then get rid of padding for the parent and the body (or adjust to the real value if you want it):
<body>
<div class="container">
<div class="div-1">
<div class="div-1-inside">
something here
</div>
</div>
<div class="div-2"></div>
</div>
</body>
body {
background: blue;
padding: 10px;
}
.div-1 {
position: relative;
background: red;
}
.div-1-inside {
padding: 60px;
background: red;
}
.div-2 {
height: 50px;
background: yellow;
}
I have a button made of divs; .parent div has child divs; one div with an icon and other with a span for text.
<div class="parent" style="width:100px;height:100px;">
<div class="child1" style="width:50px;height:50px;">
<img src="#"/>
</div>
<div class="child2" style="width:20px;height:20px;">
<span>hii</span>
</div>
</div>
.parent:active{ background: red;}
this only works when I click out of child div's and inside parent div.
but I need for the whole area.
This is working fine in chrome but not in IE.
I need a solution that works in both chrome and IE.
Why not use an actual button with its active state?
EDIT:
I noticed you mentioned this doesn't work in IE, this is because in IE, the clickable area is behind the content you put on the parent div, for whatever reason, honestly I don't understand that very well; but fixes I have found include setting a ::before and ::after pseudo-class to the parent div, with the following properties:
.parent:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
button {
width: 100px;
height: 100px;
}
button:active {
background-color: red;
}
.parent {
width: 100px;
height: 100px;
border: 1px solid #000;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.parent:active {
background-color: red;
border: 1px solid #000;
}
.parent:before {
content: "";
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<button>
<img src="#"/>
<span>Text</span>
</button>
<div class="parent">
<div class="child1" style="width:50px;height:50px;border:1px solid blue;">
<img src="#" />
</div>
<div class="child2" style="width:20px;height:20px;border:1px solid green;">
<span>hii</span>
</div>
</div>
I have put together a JSFiddle which I'm satisfied has the correct code.
As you can see, when you hover over the 'a' element I have a div positioned at the bottom raise to show hidden 'text'
a {
display: block;
width: 200px;
}
a:hover .b {
bottom: 0px;
}
.a {
height: 250px;
background-color: red;
position: relative;
overflow: hidden;
}
.b {
position: absolute;
bottom: -50px;
background-color: yellow;
width: 100%;
}
.c {
height: 50px;
background-color: green;
}
<a href="http://www.google.com">
<div class="a">
<div class="b">
<div class="c">
A title
</div>
<div class="c">
Read more
</div>
</div>
</div>
</a>
The problem I have is that the showing of the bottom div is too quick, is there a css property that allows the div to rise up slowly?
There's a similar method used in this website (part way down the page) which I'm trying to replicate.
Any ideas how this can be achieved?
On the b element in css add the transition css property to specify the time it take to associate the style:
.b {
position: absolute;
bottom: -50px;
background-color: yellow;
width: 100%;
transition: bottom 1s;
-webkit-transition: bottom 1s;
}
I have a simple < div > (without fixed hegiht) with a text in it:
<div id="section">
<div class="container">
<h1>text</h1>
<p>More text</p>
</div>
<!-- <div id="overlay"></div> -->
</div>
The CSS for this is something like:
#section {
background: red;
overflow: hidden;
}
It's possibile to add a div with a transparent image background?
The overlay sholud be hover the main red background, but under the text.
I think is something like this, but dont works:
#section #overlay {
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100px; /* ??? */
background: green;
opacity: 0.1;
}
#section {
background: red;
display: block;
position: relative;
overflow: hidden;
}
#container {
position: relative;
width: 100%;
text-align: center;
z-index: 9999;
}
#overlay {
position: absolute;
left: 0;
width: 100%;
height: 100%;
top: 0;
background-color: rgba(0,0,0,0.3);
}
If I'm understanding you correctly, how about something like this:
HTML:
<div id="section">
<div id="container">
<h1>My background is transparent!</h1>
<p>More text</p>
</div>
</div>
CSS:
#section {
width: 300px;
background-color: red;
}
#container {
position: relative;
left: 50px;
width: 200px;
text-align: center;
background-color: rgba(0,0,0,0.3);
}
Results here: JSFiddle
If that's not what you wanted, can you be more specific about the positioning?
try below example using jquery ui will reduce the effort
<div id="dialog">Your non-modal dialog</div>
Open dialog
$('#open').click(function() {
$('#dialog').dialog('open');
});
jQuery(document).ready(function() {
jQuery("#dialog").dialog({
autoOpen: false,
modal: true,
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery('#dialog').dialog('close');
})
}
});
});