ホバーでクリック可能な別のテキストにテキストを変更するにはどうすればよいですか？

Question

私はいくつかのHTML/CSSスタイリングについて助けが必要です。私は、ユーザーのカート内のアイテムを表示する私のウェブサイトにカートウィジェットを持っていて、アイテムの数量、名前、価格、アイテムを削除するボタンを表示します。 This is what it looks like.ここでは、数量、アイテム名、価格を一番右に表示するだけです。ユーザーがアイテムを移動するたびに単語「削除」を表示して、右端。だから、私は通常、数量、商品の名前、価格になるようにしたい。ユーザーがカートアイテムの上を移動すると、価格を「削除」という単語に置き換えます。ここでは、ウィジェットのHTMLです：

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

は、そして、ここで私が持っているCSSです：

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; 
} 

をし、[削除]ボタンのために：

a.edd-remove-from-cart { 
    color: #666; 
} 

a.edd-remove-from-cart:hover { 
    color: #e56363; 
} 

ごめんなさいもしこのISN」十分な情報。より多くのCSSやHTMLが必要な場合は、必要なものを教えてください。コピーして貼り付けることができます。すべてありがとう！

Answer 1

このタイプの質問については、実際の例を提供することをお勧めします。

私はあなたがこれをCSS：hover擬似クラスで簡単に行うことができると考えています。

簡単なデジタルダウンロードフォーラムのヘルプもあります。あなたが親ULタグが欠落しているよう

はルックス：/

これはトリックを行う必要があります。

#modal #content li.edd-cart-item { 
    margin-bottom: 5px; 
    padding-bottom: 5px; 
    border-bottom: 1px solid #ddd; 
    position: relative; 
} 

a.edd-remove-from-cart { 
    color: #666; 
    display: none; 
    position: absolute; 
    width: 100%; 
    background: #fff; 
    left: 0; 
    top: 0; 
} 

#modal #content li.edd-cart-item:hover a { 
    display: inherit; 
}