Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How can I change class on :checked on a div including the checkbox

How can I change class on :checked on a div including the checkbox

Problem

I want to disable the :hover effect when :checked on a div including my checkbox.
I've tried :

input[type=checkbox]:checked ~ #mydiv:hover {my:css}

It works only for div/class non including my checkbox...

How can I do that ?

Here is my code : http://codepen.io/casimirp/pen/gxfqE?editors=110 And I want to change the #card:hover{ top:50px;}

Thanks

Problem courtesy of: user3694393

Solution

#card is a parent of the input checkbox type. You can't select a parent element relative to its child. However, since your checkbox is hidden anyway you can just move it somewhere else, i.e. as a previous sibling of #card. Then, you will be able to select #card via :checked ~ #card and remove the top.

http://codepen.io/anon/pen/maDjp

Solution courtesy of: Explosion Pills

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How can I change class on :checked on a div including the checkbox

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×