使用css在悬停时显示图标

Question

I just want to show an icon on hover with css. I tried it like this but its not working. :(

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

There are 2 reason this isn't working for you:

1. To include a Font Awesome icon in HTML, you use it like this (see "How to use" for this Font Awesome icon ):

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

2. When you use the + in a CSS selector like this .casino-btn:hover + .bonus-icon , it means the next element, but bonus-icon is a child of the button. You just use a space to target a child, eg

.casino-btn:hover .bonus-icon 

Working Example:

 .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>