How to make text change to different text that is clickable on hover?

I need help on some HTML/CSS styling. I have a cart widget on my website that shows the items in the users cart, and it displays the item quantity, the name, the price, and a button to remove the item. This is what it looks like. Now, what I want is for it to only display the quantity, the item name, and the price on the far right, and I want the word "remove" to appear whenever the user hovers over the item, replacing the price on the far right. So, I want there to normally be just the quantity, the name of the item, and the price. When the user hovers over the cart item, I want the price to be replaced with the word "remove". Here's the html of the widget: <div id="modal" style="width: auto; height: auto; top: 178px; left: 542.5px; display: block;"><div id="content"> <!--dynamic-cached-content--> <li class="cart_item empty" style="display: none;"><span class="edd_empty_cart">Your cart is empty.</span></li> <li class="edd-cart-item"> <span class="edd-cart-item-quantity">&nbsp;1&nbsp;</span><span class="edd-cart-item-separator">&nbsp;-&nbsp;</span><span class="edd-cart-item-title">The Grant</span> <span class="edd-cart-item-price">&nbsp;$2.00&nbsp;</span><span class="edd-cart-item-separator">-</span> <a href="http://baylornorrisphotography.com/checkout/?cart_item=0&amp;edd_action=remove&amp;nocache=true" data-cart-item="0" data-download-id="3573" data-action="edd_remove_from_cart" class="edd-remove-from-cart">remove</a> </li> <li class="cart_item edd-cart-meta edd_total" style="">Total: <span class="cart-total">$2.00</span></li> <li class="cart_item edd_checkout" style=""><a href="http://baylornorrisphotography.com/checkout/">Checkout</a></li> <!--/dynamic-cached-content--> </div><a id="modal-close" href="#"><i class="fa fa-times-circle-o"></i></a> </div> And here's the CSS that I have: body, button, input, textarea { color: #55b6fb; font-family: 'Lato', sans-serif; font-style: normal; font-weight: 400; font-size: 16px; font-size: 1.6rem; line-height: 1.75; word-wrap: break-word; -webkit-font-smoothing: antialiased; } And for the remove button: a.edd-remove-from-cart { color: #666; } a.edd-remove-from-cart:hover { color: #e56363; } I'm sorry if this isn't enough information. If you need more CSS or HTML, tell me what you need and I can copy and paste it. Thank you all so much!