javascript - 如何在表行中实现类似 Spotify 播放按钮的按钮 css

Question

您好，我试过像 Spotify 一样自定义我的按钮。

悬停表格行时显示播放按钮并单击播放按钮更改图像。

我引用了其他 fiddle 并进行了更新。现在我单击一个元素，另一个将隐藏。但是，一开始我不知道如何隐藏其中一个。

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
a:hover {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}
a:target {
  display: none;
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}

<a id="btn" href="#btn">Play</a>
<a id="btn2" href="#btn2">Pause</a>

Answer 1

您可以在不编写脚本的情况下使用纯 css 执行以下操作。

a {
  display: block;
  font-size: 18px;
  border: 2px solid gray;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}
a:hover {
  font-size: 18px;
  border: 2px solid green;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}
a:target {
  display: none;
  font-size: 18px;
  border: 2px solid red;
  border-radius: 100px;
  width: 100px;
  height: 100px;
}
a:nth-last-child(2){
  display:none;
  }
a:first-child:target + a:nth-last-child(2){
  display:block;
  }

<a id="btn" href="#btn">Play</a>
<a id="btn2" href="#btn2">Pause</a>