使用css在懸停時顯示圖標

Question

我只想在使用 css 懸停時顯示一個圖標。 我像這樣嘗試過，但它不起作用。 :(

HTML：

<button class="casino-btn">BONUS<font-awesome-icon :icon="['fas', 'gift']" class="bonus-icon"/></button>

CSS：

.bonus-icon {
        visibility: hidden;
    }

    .casino-btn:hover + .bonus-icon {
        visibility: visible;
    }

Answer 1

這對您不起作用有兩個原因：

1. 要在 HTML 中包含 Font Awesome 圖標，您可以像這樣使用它（請參閱此Font Awesome 圖標的“如何使用”）：

<i class="fa fa-gift bonus-icon" aria-hidden="true"></i>

2. 當您使用+ CSS選擇這樣.casino-btn:hover + .bonus-icon ，這意味着下一個元素，但bonus-icon是按鈕的一個孩子。 您只需使用一個空格來定位一個孩子，例如

.casino-btn:hover .bonus-icon 

工作示例：

 .bonus-icon { visibility: hidden; } .casino-btn:hover .bonus-icon { visibility: visible; }

 <script src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"></script> <button class="casino-btn">BONUS <i class="fa fa-gift bonus-icon" aria-hidden="true"></i> </button>