如何實現像表格中的Spotify播放按鈕的按鈕css

Question

您好我試圖定製我的按鈕像Spotify。

當懸停表格行顯示播放按鈕，然後單擊播放按鈕更改圖像。

我從其他小提琴和更新的諮詢。現在我點擊一個元素，另一個元素將隱藏。但是，我不知道如何在開始時隱藏其中一個。

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>

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