Click-through with hover effect in CSS - css

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.

Related

CSS: 2nd hovered action on already hovered element (z-index?)

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

Hide link after hitting :target

I have this https://jsfiddle.net/tbdrLm3q/4/
code on js fiddle
How do I hide the button (which is a link) after clicking it without affectin the height transition?
Only css please.
I think you must add a container like this and change the link to container
<div id="container">
<a href="#container" class='myButton'>Click</a>
<div id='sharebox'></div></div>
then
make your css like this
#container:target #sharebox{
//your style
}
#container:target .myButton{
visibility: hidden;
}
i hope this usefull :)

How do I remove the blue box around editable elements upon editing?

We can make HTML elements editable by using the contentEditable="true" attribute:
<div contentEditable="true">
This text can be edited by the user.
</div>
JS Fiddle
How can I make the blue box surrounding the element go away when the user edits the content?
I've tried using the :active and :hover pseudo-classes (along with border: none) to no avail.
This is not border but outline which you see on focus. You can try this:
div[contentEditable] {
outline: none;
}
Demo: http://jsfiddle.net/bxmr6gzg/1/

CSS selector based on selector?

I am trying to set a button's background color if the menu is open. The class for the menu when open is client-menu-open. The class for the button is client-header button. Is there a way to set the button's color only if the menu is open? I have tried .client-menu-open ~ .client-header button, .client-menu-open .client-header button... Can't get anything to work.
Here is the HTML:
<body>
<div>
<header>
<button class="client-header button"/>
</header>
<div class="client-menu client-menu-open">...</div>
</div>
</body>
I think it would be (assuming the class-menu-open is added, not swapped for):
.client-header button client-menu-open {
background-color: #abcdef;
}
If your CSS is all in one line it's .class.class. If it's a div in a div it's .class .class.
So it should be:
.client-menu.client-menu-open for <div class="client-menu client-menu-open">
Only if you are working with HTML elements do you not use a # or . to select.
You can't go backwards into a previously nested element. You can probably do this with Javascript, but your question is based on CSS only.

Specify style of div when hyperlink is being hovered over

With regard to the following markup:
<div class="mydiv">
<img src="myimage.gif" />
</div>
The div.mydiv is basically styled to be a pretty rounded edge box around the image specified within the link. Lets say its background-color starts as black.
I would like to make it so that when I :hover over myimage.gif, the style of div.mydiv changes the background-color to, lets say, yellow.
How can I specify the style of div.mydiv when a nested <a> is being hovered over?
Use
.mydiv:hover
{
background-color:yellow;
}
in a CSS file, assuming you have one. I don't think there's a way to do this inline.

Resources