如何在表格行中实现像Spotify播放按钮这样的按钮css

Question

您好我尝试像Spotify一样自定义按钮。

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

我从其他小提琴咨询并更新。现在我点击一个元素，另一个元素将隐藏。但是，我不知道如何在开头隐藏其中一个。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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>

Answer 2

您可以使用内联样式并将css属性display设置为none：

<a id="btn2" href="#btn2" style="display:none;">Pause</a>

或使用javascript：

document.getElementById('btn2').style.display = 'none';

希望这有帮助。

Answer 3

您可以使用单行来实现Jquery。单击链接时更改文本。

$('.play').click(function(){
    var $this = $(this);
    $this.toggleClass('active');
    if($this.hasClass('active')){
        $this.text('Pause');         
    } else {
        $this.text('Play');
    }
});

<强> Demo