Javascript 如何在表格行中实现类似Spotify play按钮的css按钮

嗨，我试着像Spotify一样定制我的按钮

将鼠标悬停在表格行上时，单击“显示播放”按钮，然后单击“播放”按钮“更改图像”

我向其他小提琴手请教，并进行了更新。现在我单击一个元素，另一个元素将隐藏。然而，一开始我不知道如何隐藏其中一个

a{
显示：块；
字号：18px；
边框：2倍纯色灰色；
边界半径：100px；
宽度：100px；
高度：100px；
文本对齐：居中；
线高：100px；
}
a:悬停{
字号：18px；
边框：2倍纯绿；
边界半径：100px；
宽度：100px；
高度：100px；
}
a:目标{
显示：无；
字号：18px；
边框：2倍纯红；
边界半径：100px；
宽度：100px；
高度：100px；
}

---

您可以使用内联样式并将css属性

显示设置为
无
：

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

希望这有帮助。
您可以通过Jquery使用单行代码来实现这一点。单击链接时更改文本

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

您可以使用纯css执行以下操作，而无需编写脚本


a{
显示：块；
字号：18px；
边框：2倍纯色灰色；
边界半径：100px；
宽度：100px；
高度：100px；
文本对齐：居中；
线高：100px；
}
a:悬停{
字号：18px；
边框：2倍纯绿；
边界半径：100px；
宽度：100px；
高度：100px；
}
a:目标{
显示：无；
字号：18px；
边框：2倍纯红；
边界半径：100px；
宽度：100px；
高度：100px；
}
a:第n个孩子（2）{
显示：无；
}
a:第一个孩子：目标+a:第n个最后一个孩子（2）{
显示：块；
}


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