如何用CSS隱藏按鈕文本？ -有解無憂

我試圖在用戶懸停在一個按鈕上時隱藏文本Following。我對CSS沒有太多的經驗，在做這件事時遇到了困難。

這是我的按鈕

<span>
   <%= link_to 'Following', follow_url(found), method: :delete, 
                class: "btn unfollow-button"，id: 'unfollow-button', .
                data: { confirm: '你確定嗎？' } 
    %>
</span>

下面是application.scss

。

.unfollow-button {
  width: 100px; /* set a width so it does not change upon hover */
  內容： 'Following'。
  border-color:/span> #bd2b2b;
  background-color: #140d6d;/span>
  color: white;
  margin-left: 20px;
  &:visited, &: focus, &:hover {
    內容： 'Following'。
    border-color: #FF0000;/span>
    background-color: #FF0000;
    color: white;
  }

  
}
.unfollow-button:hover span {
  display:none
}
.unfollow-button:/span>hover:before {
  content:" Unfollow"。
}

現在這個按鈕將新的內容Unfollow附加到按鈕的前面，但沒有洗掉舊的內容

因此，按鈕從Following變成了Unfollow Following，而不是預期的Following到UnFollow

。

如果有任何幫助，我們將不勝感激。謝謝！

uj5u.com熱心網友回復：

在這里

<!-- language: lang-html -->

<div class="item" >
       <%= link_to follow_url(found), method: :delete, 
                class: "btn unfollow-button"，id: 'unfollow-button', .
                data: { confirm: 'Are you sure? ' } 
    do %>
         < p class="label success new-label" > <span class="align">。 Following</span></p>/span>
    <% end %>
</div>

在你的css中

 item{
        width: 30px;
    }
    a{
        text-decoration:none;
    }
    .標簽 {
        width: 100px; /* set a width so it doesn't change upon hover */.
      內容： 'Following'。
      border-color:/span> #bd2b2b;
      background-color: #140d6d;/span>
      color: white;
      margin-left: 20px;
    }


    .item a p.new-label span{
      位置：相對。
      內容: 'Following'。
    }
    .item:hover a p.new-label span{
      display: none;
    }
    .item:/span>hover a p.new-label:/span>after{
      內容： '取消關注'。
    }

uj5u.com熱心網友回復：

如果文本在懸停時不匹配，只需將data-follow/unfollow

中的文本交換即可。

。

.btn。 unfollow-button :hover: before {
  內容。attr（data-unfollow）。
}

[data-unfollow]:before {
  內容。attr（data-unfollow）。
}

[data-follow]:before {
  內容。attr（data-follow）。
}

<!-- Rails-html應該生成下面一行。-->
< a class="btn unfollow-button", id='unfollow-button'> 
  < span data-unfollow="取消關注" data-follow="關注" > </span>>
<a />/span>

#rails-html

<span>
 <%= link_to follow_url(found), method: :delete, 
      class: "btn unfollow-button"，id: 'unfollow-button', .
      data: { confirm: 'Are you sure? ' } do %>
      <span data-unfollow="取消關注" data-follow="關注"> </span>
 <%結束%>。
<span/>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/313853.html

標籤：

上一篇：RSpec。我們可以配置一個期望值來回傳兩個不同的值嗎？我想測驗重試機制

下一篇：Mikro-ORM：錯誤：沒有引數$1