Question

我正在尝试创建一个元素，以根据其ID悬停时显示其他元素。

例如，如果将鼠标悬停在带有id=hover1的元素上，它将显示带有id=hidden1的元素。

我尝试使用选择器，但由于无法确定如何使用选择器来选择位于不同div中的元素，我一直在努力使用它们。

.hidden {
  display: none;
}

.hover {
  font-size: 18pt;
  font-family: 'Helvetica';
  transition: all .19s ease-in-out;
}

.hover:hover {
  background-color: #ffb300;
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}

#hover1:hover~#hidden1 {
  background-color: #ffb300;
  font-size: 18pt;
  font-family: 'Helvetica';
  display: block;
}

#hover2:hover~#hidden2 {
  background-color: #ffb300;
  font-size: 18pt;
  font-family: 'Helvetica';
  display: block;
}

<body>
  <h1>CSSHoverTest</h1>
  <div class="NewRowClass1">
    <div>
      <span class="hover" id="hover1">Hover1</span>
      <span class="hover" id="hover2">Hover2</span>
    </div>

    <div>
      <div class="hidden" id="hidden1">
        <p>Hidden1</p>
      </div>
      <div class="hidden" id="hidden2">
        <p>Hidden2</p>
      </div>
    </div>
  </div>
</body>

悬停ID以显示ID

0 个答案: