So i have a robot drawn in HTML+CSS, colored via "background-color" and i want his parts to change color onclick. I know it can be done(probably) in several easy quick lines of JS\Jquery, but i want a pure CSS solution. I've been trying to implement the checkbox hack, but failed miserably(see "#recolor:checked > .torso" section in CSS part). Code included.
body{
background-color: rgba(0, 0, 0, 0.788);
}
h1 {
text-align: center;
font-family: 'Roboto', sans-serif;
margin-left: 50px;
color: whitesmoke;
}
.robots {
display: flex;
flex-flow: column wrap;
justify-content: center;
align-items: center;
margin-left: 100px;
}
nav{
position: fixed;
top: 75px;
left: 20px;
margin: 0px 50px 0px 20px;
width: 300px;
color: blanchedalmond;
}
ul{
list-style: none;
}
.head,
.left_arm,
.torso,
.right_arm,
.left_leg,
.right_leg {
background-color: #5f93e8;
}
#recolor:checked > .torso {
background-color: chartreuse;
}
.head {
width: 200px;
margin: 0 auto;
height: 150px;
border-radius: 200px 200px 0 0;
margin-bottom: 10px;
}
.eyes {
display:flex;
}
.head:hover {
width: 300px;
transition: 1s ease-in-out;
}
.upper_body {
width: 300px;
height: 150px;
display: flex;
}
.left_arm, .right_arm {
width: 40px;
height: 125px;
border-radius: 100px;
}
.left_arm {
margin-right: 10px;
}
.left_arm:hover {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-o-transform: rotate(120deg);
-ms-transform: rotate(120deg);
transform: rotate(120deg);
}
.right_arm {
margin-left: 10px;
}
.torso {
width: 200px;
height: 200px;
border-radius: 0 0 50px 50px;
}
.lower_body {
width: 200px;
height: 200px;
margin: 0 auto;
display: flex;
}
.left_leg, .right_leg {
width: 40px;
height: 120px;
border-radius: 0 0 100px 100px;
}
.left_leg {
margin-left: 45px;
}
.left_leg:hover {
-webkit-transform: rotate(20deg);
-moz-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}
.right_leg:hover {
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
-ms-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.right_leg {
margin-left: 30px;
}
.left_eye, .right_eye {
width: 20px;
height: 20px;
border-radius: 15px;
background-color: white;
}
.left_eye {
position: relative;
top: 100px;
left: 40px;
}
.right_eye {
position: relative;
top: 100px;
left: 120px;
}
<!DOCTYPE html>
<html>
<head>
<title>RoboPage</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<header>
<h1>Robot Friend</h1>
</header>
<nav class="tutorial">
<h2>Usage tutorial</h2>
<ul class="tips">
<li>Hover over robot's left arm for him to greet you!</li>
<li>Click and hold on bot's body for him to change color</li>
<li>Hover over bot's legs for him to make a tap dance</li>
</ul>
</nav>
<div class="robots">
<div class="android">
<label for="recolor">
<input type="checkbox" id="recolor">
<div class="head">
<div class="eyes">
<div class="left_eye"></div>
<div class="right_eye"></div>
</div>
</div>
<div class="upper_body">
<div class="left_arm"></div>
<div class="torso"></div>
<div class="right_arm"></div>
</div>
<div class="lower_body">
<div class="left_leg"></div>
<div class="right_leg"></div>
</div>
</label>
</div>
</div>
</body>
</html>
hover
, which can make the element to shake uncontrollably. You can solve that by not having the target of the rotation be the one who activates the rotation, as this video explains: youtu.be/8kK-cA99SA0?t=946 – Rickard Elimää Nov 16 at 21:45