纯CSS灯泡-两种形状均可在点击时改变颜色

Question

我用纯CSS制成了一个灯泡，我希望灯泡在点击时可以改变颜色。但是我的灯泡形状由两个形状组成，因此我无法将鼠标悬停在两个形状上。有没有一种方法可以解决此问题，而无需使用JavaScript，仅使用CSS？也许有一种无需结合两个就可以创建这种黄色形状的方法吗？或以其他任何方式可以使悬停效果起作用。

.box {
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  width: 600px;
  height: 600px;
  background: white;
}

#circle {
  position: absolute;
  width: 40%;
  height: 40%;
  background: yellow;
  top: 20%;
  left: 30%;
  margin: 0 auto;
  border-radius: 50%;
}

#trapezoid {
  position: absolute;
  background: yellow;
  height: 30%;
  width: 40%;
  left: 30%;
  top: 42%;
  -webkit-clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}

#bottom1 {
  position: absolute;
  height: 5%;
  width: 25%;
  background: grey;
  top: 72%;
  left: 37.5%;
  z-index: 1;
}

#bottom1:before {
  content: "";
  height: 100%;
  width: 20%;
  background: grey;
  display: block;
  position: absolute;
  border-radius: 50%;
  left: -8%;
}

#bottom1:after {
  content: "";
  height: 100%;
  width: 20%;
  background: grey;
  display: block;
  position: absolute;
  border-radius: 50%;
  right: -8%;
}

#bottom2 {
  position: absolute;
  height: 5%;
  width: 22%;
  background: grey;
  top: 78%;
  left: 39%;
}

#bottom2:before {
  content: "";
  height: 100%;
  width: 20%;
  background: grey;
  display: block;
  position: absolute;
  border-radius: 50%;
  left: -8%;
}

#bottom2:after {
  content: "";
  height: 100%;
  width: 20%;
  background: grey;
  display: block;
  position: absolute;
  border-radius: 50%;
  right: -8%;
}

#bottom3 {
  position: absolute;
  height: 5%;
  width: 18%;
  background: grey;
  top: 84%;
  left: 41%;
  z-index: 1;
}

#bottom3:before {
  content: "";
  height: 100%;
  width: 20%;
  background: grey;
  display: block;
  position: absolute;
  border-radius: 50%;
  left: -8%;
}

#bottom3:after {
  content: "";
  height: 100%;
  width: 20%;
  background: grey;
  display: block;
  position: absolute;
  border-radius: 50%;
  right: -8%;
}

#shine {
  width: 20%;
  height: 20%;
  background: white;
  border-radius: 50%;
  top: 20%;
  position: absolute;
  left: 18%;
}

.halfCircle {
  height: 100px;
  width: 100px;
  border-radius: 0 0 90px 90px;
}

#halfCircle {
  height: 45px;
  width: 90px;
  border-radius: 0 0 90px 90px;
  background: black;
  margin: 0 auto;
  top: 88%;
  position: relative;
}

.drop {
  width: 5%;
  height: 5%;
  position: absolute;
  border: 15px solid orange;
}

#left {
  left: 38%;
  top: 45%;
  border-radius: 50% 50% 0 50%;
}

#left:after {
  content: "";
  height: 110px;
  width: 24px;
  border: 15px solid orange;
  display: block;
  position: absolute;
  left: 100%;
  top: 100%;
}

#right {
  right: 38%;
  top: 45%;
  border-radius: 50% 50% 50% 0;
}

#circle:hover {
  background: red;
}

#trapezoid:hover {
  background: red;
}

<div class='box'>

  <div id='circle'>
    <div id='shine'></div>
  </div>

  <div id='trapezoid'></div>


  <div id='bottom1'></div>
  <div id='bottom2'></div>
  <div id='bottom3'></div>

  <div id='halfCircle'></div>

  <div class='drop' id='left'></div>
  <div class='drop' id='right'></div>


  <div id='wire'></div>




</div>

Answer 1

您不必将:hover直接应用于要更改的元素。您可以将其吊装到包装元件上并应用到那里。

考虑到您的示例，您的选择器可能类似于以下内容：

.box:hover #circle {
  background: red;
}

.box:hover #trapezoid {
  background: red;
}

请考虑以下具体示例。将鼠标悬停在两个嵌套的<div>上会导致同级<div>也改变颜色，因为#container被:hover编辑了。

#foo,
#bar {
  height: 20px;
  background-color: green;
  border: 1px solid white;
}

#foo:hover,
#bar:hover {
  background-color: blue;
  border: 1px dashed yellow;
}

#container:hover #foo,
#container:hover #bar {
  background-color: red;
}

<div id="container">
  <div id="foo">foo</div>
  <div id="bar">bar</div>
</div>