html - 纯 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> 中的任一个上导致 sibling <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>