<button type="button" data-toggle="dropdown" data-loading-text="<?php echo $text_loading; ?>" class="btn btn-block btn-lg dropdown-toggle"> <a class="shop"> <i class="fa fa-shopping-bag" aria-hidden="true"></i></a> <span id="cart-total"><?php echo $text_items; ?></span></button> .shop { background-color: #1E73BE; display: inline-block; padding-left: 12px; padding-right: 12px; } .shop:hover { background-color: white; } .fa-shopping-bag { color: white; font-size: 20px; } .fa-shopping-bag:hover { color: purple; }

http://sitehero.us/

  • and how should it work? and then we have a hover on the icon and the link. Write in more detail - klifort
  • you need the icon to change when you hover. already and with diva and span and reference did nothing - Alex2222

1 answer 1

but I think it will be ok

  .shop { background-color: #1E73BE; display: inline-block; padding-left: 12px; padding-right: 12px; } .shop:hover { background-color: white; } .fa-shopping-bag { color: white; font-size: 20px; } .shop:hover .fa-shopping-bag { color: purple; }
  • This is my cited code, so what? - Alex2222
  • it is corrected, read carefully in your code it is written so that the color changes when you hover over the icon, and so that it changes when you hover over the span you need to register .shop: hover .fa-shopping-bag - klifort
  • Anyway, nothing happens :( - Alex2222
  • try instead of shop -> btn to write, just you point at the button and not at the tag a, you can prescribe the best class for the button - klifort
  • and initially the construction is a bit strange, it's better to write it differently. not a button but a div for example - klifort