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;
}
There are 2 reason this isn't working for you:
<i class="fa fa-gift bonus-icon" aria-hidden="true"></i>
+
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.