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
Related
Like this:
http://i.imgur.com/homRkRv.png
How can I do it? I've looked up online and only managed to create a popout window with pure CSS but I wasn't able to click around which is something that I don't want.
You can implements your css with focus
a.button {
background: #000;
display:block
}
a.button div {
display:none;
}
a.button:focus div {
display:block
}
Only for this example:
<a class="button" href="#">Clickme
<div>Content hidden</div>
<a>
Last part, Click on link, then its will to show div.
You can add more style to div, such as position absolute, background etc.
I'm trying to make a button without a link, as the background is already linked. Therefore you should be able to cick through it. I know about pointer-events:none but when using this, the div's :hover won't work anymore.
Is there any way to achieve this?
My HTML is:
<div class="button">
<span>Click here</span>
</div>
CSS:
.button { pointer-events: none; }
.button:hover { ... }
The "button" class should have an :hover effect + click through. This setup won't show the :hover effect.
Without seeing your code I would suggest one of two routes:
1) Just link both. No bigs.
2) Link your background via javascript. If the button is a child element, the click event will bubble to your linked background.
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/
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.
Can i change parent class of some dom object on hover event via CSS selectors?
For example I have such block:
<span class="wBlock" >
<span class="wText">Text</span>
<span class="wLink"/>
<\/span>
and if i move mouse to span "wLink" span "wBlock" must be changed, and if i move out than it must be the same as at the begining
.wLink{
padding-right:15px;
background:url(/img/addlink.png) center right no-repeat;
cursor:pointer;
}
.wText{
background-color: #1BE968;
}
It's something like this alt text http://img192.imageshack.us/img192/5718/capturehlk.jpg and if i move my cursor to plus text highlight must be changed to yellow
I belive you can't do that in CSS.
I would advise to restructure your HTML so you dont end up using JS hacks to apply styles.