Question

我希望你能帮助我。我试图将“添加到购物车”的图片悬停在这里：https://spacewallet.de/shop
我不知道，我在这里做错了什么，你能帮忙吗？

.hunderter {
    background: url(http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg);
    display: block;
    background-size: 100%;
    border: transparent !important;
    background-color: transparent !important;
}

a.hunderter:hover {
    background-color: rgba(100,230,230,0.5);
    background-position: 0 0;
    content:"&#9205; &#10145;Zum Warenkorb hinzufügen";
}

<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="hunderter"></a>

Answer 1

如果我理解正确你......你想要一只手悬停？...然后你用

光标：指针

a.hunderter:hover {
    background-color: rgba(100,230,230,0.5);
    background-position: 0 0;
    content:"&#9205; &#10145;Zum Warenkorb hinzufügen";
    cursor:pointer
}

＆＃13;

.shop_bar{
background:black;
  color:white;
  opacity:0;
  transition:all 0.5s;
}
.product_img:hover .shop_bar{
opacity:1;
}

Edit: The approach below shows how to add a bar at the bottom of the product...when you hover over the image the bard with some details will show..put whatever details you want in this html tag.

＆＃13;

<div class="product_img">
  <img src="https://spacewallet.de/wp-content/uploads/2016/06/businessblack-1-ohne-Rand.jpg">
  <div class="shop_bar">
    Buy this
  </div>
</div>

＆＃13;

Answer 2

您可以添加<span>来解决此问题，该问题仅在悬停时可见：

＆＃13;

.hunderter {
  position: relative;
  background: url(https://unsplash.it/200/300);
  display: block;
  width: 200px;
  height: 100px;
  background-size: 100%;
}
.hunderter span {
  position: absolute;
  bottom: 0;
  visibility: hidden;
}
a.hunderter:hover span {
  background-color: rgba(100, 230, 230, 0.5);
  visibility: visible;
  color: white;
}

＆＃13;

<a href="#" class="hunderter">
  <span>&#9205; &#10145;Zum Warenkorb hinzufügen</span>
</a>

＆＃13;

Answer 3

首先，注意几点：

1）您的图片应该是HTML的一部分。它将会改变并且是页面内容的一部分（与设计相对）。

2）您不能像在HTML中一样使用CSS中的unicode。您需要在数字前面加一个反斜杠（参见Placing Unicode character in CSS content value）

现在，回答你的主要问题......

选项1 ：如果您希望CSS内容值始终相同，则可以使用CSS伪元素::after和/或::before来完成您尝试执行的操作（请参阅下面的代码段）。但是，如果没有这些内容，你就无法在CSS中使用内容。

＆＃13;

.cart-item-link {
  position: relative;
  display: inline-block;
  border: transparent !important;
  background-color: transparent !important;
}

.cart-item-link:hover::before {
  content: "Add to Cart";
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20%;
  padding: 15px;
  background-color: rgba(100, 230, 230, 0.5);
  min-width: 80%;
  text-align: center;
}

＆＃13;

<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="cart-item-link">
  <img src="http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg" alt="" />
</a>

＆＃13;

选项2 ：当然，还有另一种可能性：＆＃34;添加到购物车＆＃34;也可以放入<span>标记，然后可以使用带有稍微不同的选择器的CSS，例如.cart-item-link:hover > .cart-item-info { ... }。（见下面的摘录）

＆＃13;

.cart-item-link {
  position: relative;
  display: inline-block;
  border: transparent !important;
  background-color: transparent !important;
}

.cart-item-link > .cart-item-info {
  display: none;
  position: absolute;
  bottom: 20%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20%;
  padding: 15px;
  background-color: rgba(100, 230, 230, 0.5);
  min-width: 80%;
  text-align: center;
}

.cart-item-link:hover > .cart-item-info {
  display: block;
}

＆＃13;

<a href="/?preview_id=4212&preview_nonce=a62d30b2b8&preview=true&add-to-cart=5767" class="cart-item-link">
  <span class="cart-item-info">Add to Cart</span>
  <img src="http://neuronade.com/wp-content/uploads/bfi_thumb/Shop-Produktbild_Bundle_englisch-min-mhvx28jvtfhpc0dhkugvgrvgvg1h17l9ze3zkr118a.jpg" alt="" />
</a>

＆＃13;

在悬停时将图像与内容相关联

3 个答案: