Is it possible to set the hitbox of an element when using -webkit-transform:scale(4);?
http://jsfiddle.net/bnA7L/
In the jsfiddle example above I have two divs. WHen you rollover one, you need to move your mouse to the edge of the new boundary to get it to return to its original size.
I want it to return to its original size as soon as the user's mouse moves out of the original hitbox.
It can be done in CSS when you add 2 children for each div.
Child 1 doesn't scale and acts as hitbox.
Child 2 scales, only when you hover over child 1.
http://jsfiddle.net/willemvb/q7vbD/
The pointer-events property makes this very easy.
First, wrap your content with a parent and a child:
<div class="parent">
<div class="child">
Hover me
</div>
</div>
Then, disable pointer events on the child, which allows pointer events to drip down to the parent element. Then use the parent's :hover pseudo-class to transform the child:
.child {
pointer-events: none;
}
.parent:hover .child {
transform: scale(4);
}
The parent remains its original size, so the "hitbox" for the hover effect remains at the original size, too.
You'll have to use jQuery or JavaScript to check the co-ordinates prior to the transform, and then listen out for the mousemove event on the DOM.
Related
I'm building a clone of this application. The .gif is what i'm trying to replicate.
I have an Email component that has a hover action to change the background color. Within that component there's a Next.js <Image/> component that should have another hover action on it as well.
How do you "stack" hover actions? I tried setting the z-index to 1 for the Email and 10 for the Image with another hover action on the Image but that didn't work. Do I need z-index? What am I missing?
You can set the :hover style for the child element the same way you would for the parent. z-index is not relevant.
div:hover {
background-color: orange;
}
span:hover {
background-color: blue;
}
<div>
<span>hello</span> there
</div>
https://codepen.io/goshdarnheck/pen/yLXOpgL
I have this grid where each cell is a relatively positioned parent of an absolutely positioned div element that itself can be either a value containing div element or a wrapper element of one such relatively positioned value element, e.g.:
<div id="my-grid">
<div class="base">
<div class="wrapper">
<div class="value">abc</div>
</div>
</div>
<div class="base">
<div class="wrapper">
<div class="value">def</div>
</div>
</div>
..
</div>
A wrapper element and its child can overflow the cells without value on their right. It is imperative for each value or wrapper element to have its background set so that it covers the backgrounds of the underlying base elements (its own and, if overflowing, of any cell on its right).
Now, each cell may occasionally have another element in its hierarchy (a "patch" element) of the same size and position of the base element (i.e. never overflowing) that, when visible, should be visually stacked in-between any wrapper (background) and its child (text value) that happen to be visually placed at the same position in the grid, whether of the cell of the patch or some other overflowing cell on its left.
The only way that comes to mind is to flatten all the wrappers and patches so they become siblings and as such the parts of a same stacking context, but this is unacceptable for many reasons.
I am open to different design/refactoring suggestions. Also, I think I saw somewhere that elements in a flex container can be visually interleaved with elements of another flex container but couldn't reproduce the effect for this purpose.
PS. Also tried different experiments with mix blending but the results were visually unsatisfactory.
Here's the real solution:
https://codepen.io/damir_p/pen/XWNOPea
#b1 {
&:before {
#include cell;
#include abspos;
z-index: $z-background;
content: attr( data-value);
background-color: yellow;
color: transparent;
min-width: max-content;
}
&:after {
#include cell;
#include abspos;
content: attr( data-value);
z-index: $z-value;
}
}
Essentially it comes down to using an attribute in the base div element and then its two pseudo classes for the background and the text value while for the patch element it is best to remain a standard div.
So I always thought if the parent container has a property set, it supercedes the child. So in my case I want the parent container to be hidden, but the child elements have a visibility of visible. But it seems the child elements visibility property supercedes the parents and thus will still show.
But the twist is if using display property, it works the way I want. Here is the html:
<div class="wrap">
title
</div>
<div class="wrap2">
title2
</div>
CSS:
.wrap { visibility:hidden; }
.wrap a { visibility:visible; }
.wrap2 { display:none; }
.wrap2 a { display:block; }
http://jsfiddle.net/yPXtB/
So what I want is the ability to hide the container if I set the visibility to hidden even if the child elements have visible.
Another workaround is to use opacity with values 0 and 1 instead of visibility.
(Though check out http://caniuse.com/#search=opacity for compatibility with too old browsers if it's important)
If you need the child css to have visibility: visible, then you can't simply set the parent to hidden, because parent doesn't override the child.
You'd need to either set each individual child to hidden as well, or wrap the children again in another div with visibility: visible, and toggle that to hidden instead of the parent, i.e.:
<div class="hiddenwrap">
<div class="visiblewrap"> /* toggle this instead */
/* content without visibility properties */
</div>
</div>
.hiddenwrap { visibility:hidden; }
.visiblewrap { visibility:visible; }
visibility: hidden causes the element not to be drawn, but it is still there and even the space it occupies stays occupied. The flow of the page isn't affected. Therefor it is possible to still draw the child in that space.
The child does use the parent's visibility if you don't specify it explicitly, as you can see here: http://jsfiddle.net/yPXtB/2/
display: none not only hides the element, but removes it from the flow of the page as well. Display affects the way the element behaves and changes the flow. There is no more space to draw the child in.
I want to hide a div element on mouse over only using css.
<div>Stuff shown on hover</div>
div {
display: block;
width:100px;
height:100px;
border: solid black;
}
div:hover {
display: none;
}
Why that doesn't work?
if I want to change -for example- the background instead it works just fine:
div:hover {
background-color: red;
}
Is not possible to hide/show the same element which I'm applying the hover selector?
http://jsfiddle.net/link01/TknA8/
Why that doesn't work?
Isn't that obvious ...?
The Div element is displayed.
You move your mouse over it - which puts it in its :hover state.
You say that for its :hover state, the element is to be removed completely from the rendered output.
Since it is now "not there any more", the mouse can't still be over it.
Mouse not over it any more means, element is no more in :hover state.
What does your CSS say again for the element when it is not in its :hover state?
Ah yes, display:block.
OK, browser renders the element again.
Hey, what's that, that freaking mouse is over it?
Let's see, that means it has to be removed again ...
When an element has its display set to none it doesn't exist in the layout and therefore can't be interacted with with the mouse.
Just add a wrapper around it:
<div class="wrapper">
<div class="hidden">Stuff shown on hover</div>
</div>
http://jsfiddle.net/cecAn/
This question already has answers here:
Why can't an element with a z-index value cover its child?
(5 answers)
Closed 2 years ago.
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
.content-wrapper is relatively positioned and contains all the page content (not just the popup).
.popup is absolutely positioned.
.close is also absolutely positioned.
I have some javascript to move close when the cursor enters popup (so I have a nice close bar appear out the side). The best way I have found to do this is just to move using jQuery animate. Hiding/showing creates a stuttering affect even .stop() wasn't able to solve. My problem is in trying to hide .close behind .popup. No matter what z-index I set for the two divs .close will not sit behind .popup.
Is it possible to have an absolutely positioned div inside another absolutely positioned div sit behind its parent, and if so how?
Yep, use z-index: http://jsfiddle.net/tGd4Q/
HTML:
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
CSS:
.popup, .close { position: absolute; height: 200px; width: 200px; }
.popup { background: #f00; }
.close { background: #ff0; top: 25px; left: 25px; z-index: -1; }
This won't work with IE7 standards though. I suggest using jQuery(or other framework of your choosing) to hide the div:
$('.popup .close').hide();
Stacking indices are most of the time relative to siblings, so you cannot put a child behind it's parent using z-index.
Here is some more information about that.
This is the stacking order:
The borders and background of the current stacking context
Positioned descendants with negative z-index
Nonpositioned block-level descendants with no z-index property defined -- paragraphs, tables, lists, and so on
Floating descendants and their contents
Nonpositioned inline content
Positioned descendants with no z-index, z-index: auto, or z-index: 0
Positioned descendants with z-index greater than 0
Nick McCormack uses z-index: -1 in his answer. This is indeed one exception to what your feelings give in. Beware that z-index: -1 moves an element behind many of your elements to the background.
Browser differences
Beside that, Internet Explorer does not support negative stacking indices and is very strict with element (child/parent) positions. Every element level has it's own stacking context, so have to 'communicate' via the parent element. See this explanation.
According to Smashing Magazine, the select element, which is a windowed control, has naturally a higher stacking index.
According to the Shadowbox troubleElement option, I presume that object, embed and canvas have the same issues.
If you want to hide .close, why don't you really hide it instead of moving it behind .popup?
$('.close').hide();
No, you will not be able to put it behind its parent. However you could change its display mode to none, so it isn't seen at all. Then when you need to see the div, change it to show.
Simple jQuery:
$('.close').hide();
$('.close').show();
There are other ways as well, such as adding an attribute of style with display:none or display: inline-block as a setting.
Update: According to comments in other answers, there IS a way to do it with z-index. Still thinking the hide/show is the way to go though. Very clear what you are doing on your UI.