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
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 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 :)
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/
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.
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.