.btngo:hover{
bottom:3px;
}
btngo goes up for 3px when pointer is over, but if pointer is just on the edge of btngo it starts flickering, i.e. goes up and down very fast.
Is there a way to prevent this?
This effect should not start before pointer is 3px inside of btngo.
This is because once the hover takes effect and the element moves, you are no longer hovering and so the hover no longer applies...and it loops.
A solution is to maintain the hover by giving the pointer something to hover over while the pointer is apparently no longer over the element.
This can be achieved by a pseudo-element positioned at the bottom of the element (since this jitter is only an issue when hovering from below)...and expand the height of the pseudo-element on parent hover.
div {
width:100px;
height:100px;
position: relative;
border:1px solid red;
margin:2em auto;
}
div::before {
content:"";
position: absolute;
width:100%;
height:3px; /* your proposed bottom position value change */
top:100%;
background:transparent;
}
div:hover {
bottom:3px;
}
div:hover::before {
height:6px; /* position value plus height */
}
<div></div>
No additional HTML, pure CSS solution.
A solution is to create a container on where you apply the hover effect and you avoid the flicker as this container will not move.
.container {
position: relative;
display: inline-block;
margin: 10px;
}
.btngo {
width: 200px;
height: 100px;
border: 1px solid;
position: relative;
}
.container:hover .btngo {
bottom: 3px;
}
<div class="container">
<div class="btngo">
text
</div>
</div>
Related
i created a white div and gave it an opacity of 0.4 and then i gave it a black border. however because i made the div transparent, the border was also transparent. How can I make the border non transparent whilst keeping the div transparent?
CSS:
#box{
background-color:white;
opacity:0.4;
width:600px;
height:200px;
border-radius:15px;
border: 5px solid black;
}
You cannot make part of an element one opacity and another part of that same element another opacity.
Here is a silly example: https://jsfiddle.net/sheriffderek/85utzq4p/
Try using rgba() for background color instead - or wrap the element in something.
.box {
background: rgba(255, 0, 0, .5);
}
Add another div that contains the current div. Remove the border property and the width and height properties on the #box and add it the other containing div. Make sure the containing div has a class instead of an id. An example:
.entirebox {
width: 600px;
height: 200px;
border-radius: 15px;
border: 5px solid black;
}
#box {
background-color: white;
opacity: 0.4;
}
<div class="entirebox">
<div id="box">
<p>The stuff that you originally had here</p>
</div>
</div>
Here, I added the containing div and named it entirebox. Notice how the containing div has a class, while the div you started off with still has an id.
Hope this helped.
if you are looking for something that can work with solid color backgrounds and image backgrounds both you can create another parent and set it in this way:
body{
margin: 0px;
}
div.child {
display: block;
position: relative;
width: 200px;
height: 150px;
background: red;
opacity:0.3;
}
div.parent{
display: inline-block;
position:relative;
border: 4px solid black;
top: 0px;
left: 0px;
}
<div class="parent">
<div class="child">
</div>
</div>
I have 2 divs of different dimension placed one over the other. So there is a common intersection area. There is CSS :hover rule set for both the divs.
If I hover over each div then the rule applies. But if I move over the intersection area, only the top div hover is actuated.
When the mouse hovers on the area of intersection, I want the :hover rule to actuate for both the divs.
Please see example code at jsfiddle
On hover over the divs, the border shows up in black. I want both the div borders to show up when mouse hovers over the intersection area.
The same code is copy pasted below for reference:
HTML
<div class='lower-layer'></div>
<div class='upper-layer'></div>
CSS
.upper-layer {
width: 200px;
height: 100px;
background-color: red;
position:absolute;
left: 20px;
top: 20px;
}
.lower-layer {
width: 100px;
height: 200px;
background-color: blue;
position:absolute;
}
.upper-layer:hover {
border: solid 2px black;
}
.lower-layer:hover {
border: solid 2px black;
}
UPDATE: To make the question more explicit. I want the border of both the divs to show up only when the mouse is within the green box in the image below
If the mouse is over the black boxes like in image below then only the individual div under the mouse should show its border.
Add :hover to your containing div (span) instead of each of the inner divs;
.upper-layer {
width: 200px;
height: 100px;
background-color: red;
position:absolute;
left: 20px;
top: 20px;
}
.lower-layer {
width: 100px;
height: 200px;
background-color: blue;
position:absolute;
}
span:hover div {
border: solid 2px black;
}
Here's the Jsfiddle:
Double Hover
I have a div defined inside a div, the outer div has certain opacity, this leads to the inner-element whose z-index is higher than it's container appear dim.IS there way to not make the inner div appear dim even though the outer div is div.
Here's the code
<body>
<style>
#cont{ background-color:yellow; width:900px; height:900px; margin:auto; padding:40px; position:relative; }
#top{ position:relative; background-color:orange; width:100%; padding:10px; }
#cont1{ background-color:black; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; opacity:0.4; }
#cont1_text{color:white; z-index:4; opacity:10; padding:20px; top:10px; }
#cont2{ background-color:blue; width:800px; padding:20px; box-sizing:border-box; position:relative; z-index:3; }
#butt{ position:relative; clear:both; }
</style>
<div id="cont">
<div id="cont1">
<div id="cont1_text">
The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW??
Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.
</div>
</div>
<div id="cont2">
</div>
</div>
</body>
The one way I know of achieving the desired result is by not placing the inner div inside the outer div. Then the div containing text is placed above container div by maintaining position, top, left etc.But the problem here is that the container's height will not increase according to the length of text as div containing text is not inside the container'd div.
The output and edit can be made here https://jsfiddle.net/sum1/av6r0aug/
whenever you don't want to apply the opacity to inner child use instead rgba on background-color.
why?
because in opacity according to MDN
The value applies to the element as a whole, including its contents,
even though the value is not inherited by child elements. Thus, an
element and its contained children all have the same opacity relative
to the element's background, even if the element and its children have
different opacities relative to one another.
So, see snippet below:
#cont {
background-color: yellow;
width: 900px;
height: 900px;
margin: auto;
padding: 40px;
position: relative;
}
#top {
position: relative;
background-color: orange;
width: 100%;
padding: 10px;
}
#cont1 {
background-color: rgba(0, 0, 0, 0.4);
width: 800px;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 3;
}
#cont1_text {
color: white;
z-index: 4;
opacity: 10;
padding: 20px;
top: 10px;
}
#cont2 {
background-color: blue;
width: 800px;
padding: 20px;
box-sizing: border-box;
position: relative;
z-index: 3;
}
#butt {
position: relative;
clear: both;
}
<div id="cont">
<div id="cont1">
<div id="cont1_text">The Last line of above code still shows the length of the array is 4, even though a element is deleted.HOW?? Well, the delete method just deletes the value from the defined position but the position still remains.It’s just like drinking coke, the
liquid is gone after drinking(deleting) but the bottle remains. This creates a hole or leaves an empty space in the array.</div>
</div>
<div id="butt">
<div id="cont2"></div>
<div id="cont2_text"></div>
</div>
</div>
One for the CSS gurus - is it possible for a div to 'escape' the constrained in the boundaries of a div with fixed dimensions and overflow:hidden?
Ive recreated the example here: http://jsfiddle.net/Wt3q4/1/
Ive tried setting z-indexes on all the elements, and assigning the div with class b position:absolute with no joy.
Since .b is nested with an element that's position:relative;, setting .b to absolute won't do anything. That I know of, with the element structure you have defined, there isn't going to be a CSS work around.
Without knowing more about your layout and what you're trying to accomplish, it's difficult to advise. You could try setting up a "double container" if that makes sense, and use a jQuery function to move the element out of the overflow:hidden; element when you want to show it.
http://jsfiddle.net/Wt3q4/3/
HTML
<div class="a">
<div class="b">
<div class="c">
</div>
</div>
</div>
<div id="show" class="button">Show!</div>
<div id="hide" class="button">Hide!</div>
CSS
.a{
position:relative;
height:200px;
width:200px;
border:3px solid #f00;
background:#ccc;
}
.b{
position:relative;
height:200px;
width:200px;
background:#ccc;
overflow: hidden;
}
.c{
width:50px;
height:300px;
border:3px solid #00f;
background:#dad;
margin:30px;
position:absolute;
z-index:333;
}
.hidden{
display: none;
}
.button {
width: 50px;
padding: 5px;
text-align: center;
border: 3px solid #aaa;
background: #ddd;
margin: 20px;
float: right;
}
jQuery
$('#show').on('click', function(){
$('.c').prependTo('.a');
$('.b').addClass('hidden');
});
$('#hide').on('click', function(){
$('.c').prependTo('.b');
$('.b').removeClass('hidden');
});
Based on my understanding of CSS's block formatting context, your div.b is a child of div.a, which means that div.a sets the block formatting context for div.b. Once you set overflow: hidden on the parent element, any child content that flows out of the parent content box will not be visible.
This is more apparent if you set outline: 1px solid black on the parent container so that you can see the extend of the content box, both with overflow hidden and visible.
Your question does touch on the essentials of CSS's visual formatting model.
How about something like:
.menu > li > ul {
position: absolute; /* you still need this here */
background-color: #9F26B4;
width: 10000000000000000px;
margin-left: -100000px;
padding-left: 100000px;
list-style: none;
z-index: 1000;
top: 0;
left: 0;
}
This, for example, overflows the entire page from left to right (assuming that the body overflow-x is set to hidden) and then set element width to enormous width, margin it to negative left to fill any left content, and padding to the left to move object inside the element to desirable X position. What you think?
I have made a fiddle for reference: http://jsfiddle.net/kLFn9/
The overflow:hidden in question is highlighted.
Basically, i'm using :hover:after to show a tool tip. but the parent element has overflow: hidden on it. How can i force the element hovered to escape the parent element?
Relevant CSS:
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
Unfortunately, there's no (easy) way to allow a child tag to override the effects of the overflow:hidden declaration on the parent div. See: Allow specific tag to override overflow:hidden
Your only possible recourse would be with javascript: first grab the span's offset relative to the document, then move it to another location in the DOM (i.e. direct child to the body), set its position to absolute, and use the offsets you grabbed to set its left and top properties, that would locate it at the same position within the document, but now it's not contained by the div, and so no longer needs to obey overflow:hidden.
You can use margin-top and padding-top.
padding-top will extend your parent area, but a negative margin-top will keep it in the expected position.
It will look like you're escaping the overflow, but in fact you're not.
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
background-clip: content-box; /*use this to constrain the background color within the content-box and do not paint the padding */
padding-top: 200px; /* space required to display the tooltip */
margin-top: -150px; /*200px - 50px of the original margin*/
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: absolute;
top: -150px;;
left: 0;
}
<div>
<span data-name="here">hover</span>
</div>
This may introduce pointer events problems, but you can fix them using pointer-events then.
I am using simple z-index for force the element hovered to escape the parent element. Please check
div {
width:500px;
height:200px;
background:red;
margin: 50px;
overflow: hidden; /* this rule */
}
span {
background: blue;
color: white;
position: relative;
top:100px;
display:block;
width: 100px;
margin: auto;
}
span:hover:after {
content: attr(data-name);
color: black;
position: fixed; /* Here I replaced position abosolute to fixed */
top: 10px; /* Here I replaced top -150px to 10px */
left: 250px; /* Here I replaced positionleft 0 to 250px */
z-index:99999;} /* Here I added new z-index property to 99999 */
<div>
<span data-name="here">hover</span>
</div>
There is no way using plain CSS to overflow a parent elements borders with a child, if it was set to overflow:hidden;. On possible CSS option is to use a sibling element to that one which has overflow:hidden; set and show that as popup.
I'm not sure what your trying to get at, but I recreated a tooltip framework for you to view. It's basically smoke and mirrors where I call :hover and the .class associated with it.
http://jsfiddle.net/WE8Dw/
Hope this helps.
In some cases you can escape with div{position: absolute;}
You can set child's position to fixed.