Question

我需要一些HTML / CSS样式的帮助。我的网站上有一个购物车小部件，用于显示用户购物车中的商品，它显示商品数量，名称，价格以及要删除商品的按钮。 This is what it looks like.现在，我想要的是它只显示最右边的数量，项目名称和价格，我希望单词＆＃34;删除＆＃34;只要用户将鼠标悬停在项目上，就会出现，替换最右边的价格。所以，我希望通常只有数量，商品名称和价格。当用户将鼠标悬停在购物车项目上时，我希望将价格替换为＆＃34;删除＆＃34;。这是小部件的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;
}

如果这还不够，我很抱歉。如果您需要更多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;
}

如何将文本更改为可在悬停时单击的不同文本？

1 个答案: