This question already has answers here:
Show child element on parent hover in CSS
(4 answers)
Closed 4 years ago.
I need to show a checkbox (which is hidden by default) when hovering over a div.
This is my html:
<div class="todoLeftImportance">
<input type="checkbox" id="todoCheckbox">
</div>
When I hover over the 'todoLeftImportance' div I would like to show the 'todoCheckbox' that is inside of it.
I've played around with "display: block" and "display: none" but I don't know how to link the div and checkbox together via css.
Css for your reference, hope it help:
#todoCheckbox{
display: none;
}
.todoLeftImportance:hover #todoCheckbox{
display:block;
}
Here you go.
<html>
<head>
<style>
.todoLeftImportance{
opacity: 0.0;
transition: all 300ms linear;
}
.todoLeftImportance:hover{
opacity: 1.0;
}
</head>
</style>
<body>
<div class="todoLeftImportance">
<input type="checkbox" id="todoCheckbox">
</div>
</body>
</html>
Add this CSS
#todoCheckbox{ visibility: hidden; }
.todoLeftImportance:hover #todoCheckbox{ visibility: visible; }
Related
This question already has answers here:
What does the "~" (tilde/squiggle/twiddle) CSS selector mean?
(3 answers)
Is there a CSS parent selector?
(33 answers)
Closed 3 years ago.
When I'm nesting my checkboxes in a <div> element my code stops working. I need images to display upon checking a certain checkbox. Code works without nesting the checkboxes in a <div>.
I want my checkboxes to be nested in a <div> so that it changes the display value from none to inline-block in the <div> with the images upon selecting a certain checkbox.
I've tried everything but I think I just can't get my head around this problem.
<body>
<style>
input[type=checkbox]:checked.ivo ~ div #fotoivo {
display: inline-block;
}
input[type=checkbox]:checked.ian ~ div #fotoian {
display: inline-block;
}
input[type=checkbox]:checked.non ~ div #fotonon {
display: inline-block;
}
#fotoivo {
width: 200px;
display: none;
}
#fotoian {
width: 200px;
display: none;
}
#fotonon {
width: 200px;
display: none;
}
</style>
<!--Checkboxes (works without the <div> wrapped around)-->
<!--<div>-->
Ivo: <input type="checkbox" name="ivoian" class="ivo">
Ian: <input type="checkbox" name="ivoian" class="ian">
Non-binair: <input type="checkbox" name="ivoian" class="non">
<!--</div>-->
<!--Images that should change from display: none to inline-block.-->
<div>
<img id="fotoivo" src="ivo.jpg" alt="#">
<img id="fotoian" src="ian.jpg" alt="#">
<img id="fotonon" src="non.jpg" alt="#">
</div>
</body>
Tilda (~) is sibling selector. When you nest the inputs, the div wrapping images isn't their sibling anymore. As CSS doesn't have parent selector, you aren't able to do it with only css. But of course, you can do it with simple JS.
You can do something like this: https://stackoverflow.com/a/7691692/11404579
Edit: also, there is little bit hacky way to do it with just CSS, but you will lose the native inputs. You can place the inputs in root element, so you can select the images with sibling selector and hide the inputs. And in some nested element place labels for those hidden inputs. This way, when you click on (nested) label, you check the input a can control the content.
This question already has answers here:
Is there a CSS parent selector?
(33 answers)
Is there a "previous sibling" selector?
(30 answers)
Closed 4 years ago.
Is this impossible? I've created a responsive menu system, but the :checked event of my checkbox doesn't get caught in my css
CSS
#sectiona:checked + #asection {
display: block;
}
HTML
<li >
<label for="sectiona" class="showhide">Search for a term</label>
<input type="checkbox" id="sectiona" value="button" style="display:none;"/>
</li>
I've see something like this before. If this isn't possible, I'll have to redesign my menus. It has to be HTML and CSS. No Javascript is allowed...
If undersood correctly you trying to show/hide checkbox input based on label click.
the visibility could do the trick.
Css:
input#sectiona:checked {
visibility: visible;
}
input#sectiona {
visibility: hidden;
}
<li >
<label for="sectiona" class="showhide">Search for a term</label>
<input type="checkbox" id="sectiona" value="button" />
</li>
in that case you can also add display: block;
input#sectiona:checked {
visibility: visible;
display: block;
}
This question already has answers here:
Difference between CSS + selector and ~ selector [duplicate]
(3 answers)
Closed 6 years ago.
I was creating a simple effect for a webpage. I wanted to show an image when mouse is hovered on a link. The problem is, when I use <br> tag, image is not shown on hover, but when I remove <br> it works.
Can anyone tell me what is the issue here? Why does the <br> obstruct the hover? Here's a snippet showing that <br> is not working:
.imageClass{
display: none;
}
a:hover + .imageClass{
display: block;
}
Esmartify
<br>
<!--When i remove this line, image is shown on hover, otherwise not-->
<div class="imageClass">
<img src="images6/concert.jpg" width="100%">
</div>
Here's a snippet showing it is working without <br>:
.imageClass {
display: none;
}
a:hover + .imageClass {
display: block;
}
Esmartify
<!--When i remove this line, image is shown on hover, otherwise not-->
<div class="imageClass">
<img src="images6/concert.jpg" width="100%">
</div>
My guess is that br behaves as an element between the link and the div. If so, a:hover ~ .imageClass should work.
a:hover + .imageClass - imageClass must be immediately after link, remove br and add to css display:block for link
or try to use: a:hover ~ .imageClass
This question already has answers here:
CSS3 transform on click using pure CSS
(8 answers)
Closed 9 years ago.
Is it possible to affect one element by another element? I want to move .box element when I click on the link a.link.
I tried this, But couldn't get it to work. What should I write at link:active?
<html>
<head>
<style>
.box
{
height:100px;
width:200px;
border:solid red 5px;
}
.link:hover
{
color:red;
}
.link:active
{
color:grey;
}
</style>
</head>
<body>
<a href="#" class=link >CLICK ME</a>
<div class=box></div>
</body>
</html>
It's possible using sibling/child selectors. The selector has to include the element you're taking action on.
When you click on .link, you want .box to move. They're next to each other, so you can use the adjacent sibling selector .link:active + .box.
You can use transitions to animate the movement.
see: http://jsfiddle.net/2P4aA/2/
This question already has answers here:
Is there a "previous sibling" selector?
(30 answers)
Closed 6 years ago.
I have two images inside a div. When the user hovers over the second image, the first one's opacity should go to 40%. I problem is that I cannot select img.first when img.second is being hovered over. I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.
I know this can be done with jQuery, but I'm wondering if there is a pure CSS solution?
<div>
<img class="first" src="#">
<img class="second" src="#">
</div>
div > img.second:hover ~ img.first { opacity:0.4; filter:alpha(opacity=40); } //failed
I have tried looking into the general sibling selector, but that seems to only select the elements that come after your initial selector.
That is correct. As such, with a pure CSS selector this isn't possible.
However, depending on your layout, you may be able to use multiple rules with selectors such as div:hover and img:hover and play with opacity values to get at what you want; see the other answers for examples. But if you want a more foolproof solution you'll be better off with jQuery.
try something like:
div:hover .img {
opacity: 0.4;
}
div .img:hover {
opacity: 1;
}
.img {
display: inline-block;
background: green;
width: 100px;
height: 40px;
}
demo: http://jsbin.com/idowoz/2/
Try this css:
div:hover img{
opacity:0.5
}
div:hover img:hover{
opacity:1
}
Test: http://jsfiddle.net/WpCtL/2/
You can do a trick to make it seem like this is what is happening: http://jsfiddle.net/cwxCX/3/
<div>
<img src="http://placekitten.com/200/200">
<img src="http://placekitten.com/300/300">
<img src="http://placekitten.com/400/400">
<img src="http://placekitten.com/500/500">
</div>
CSS
div{
float:left;
}
img{
width:100px;
height:100px;
}
div img{
float:right;
}
div img:hover ~ img{
opacity:.4;
}