Html 如何创建此悬停效果？

我有这个网站：

代码HTML:

<ul class="add-to-links">
    <li><a href="http://www.altradona.ro/wishlist/index/add/product/156/" class="link-wishlist" data-id="156"><span class="compara">++</span></a></li>
    <li><a href="http://www.altradona.ro/catalog/product_compare/add/product/156/uenc/aHR0cDovL3d3dy5hbHRyYWRvbmEucm8v/" class="link-compare" data-id="156"><span class="favorit">kjk</span></a></li>
</ul>

.compara {
    width:42px;
    background:url("/media/wysiwyg/COMPARE.png");
    color:transparent !important;
}
.compara:hover {
    background:url("/media/wysiwyg/COMPARE-HOVER.png");
}

我试图创建这种效果悬停，但不幸的是没有工作。 这是一个经典的例子。。。我在写代码时遗漏了什么？ 图片在服务器上

你能告诉我应该换什么吗

---

提前谢谢

此效果可以通过在css中使用隐藏/不透明度来创建：0；元素，该元素位于保存图像的容器中

我不确定您是否希望将其实现为

ul

，因为它在我看来似乎不太对称，但我已经创建了一个以div显示该技术的示例

您需要的基本内容是（在psudo中）

---

这就是您正在寻找的：

#续{
位置：相对位置；
}
#续：悬停>#覆盖{
显示：块；
}
#img{
宽度：300px；
高度：350px；
位置：绝对位置；
z指数：1；
}
#掩护{
宽度：300px；
高度：350px；
位置：绝对位置；
z指数：2；
背景：rgba（255100,10,0.5）；
显示：无；
}

---

此键是使用：悬停

示例html：

<div class="box">
  <div class="innerbox"></div>
  <div class="controlpanel1"></div>
  <div class="controlpanel2"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
  <div class="controlpanel1"></div>
  <div class="controlpanel2"></div>
</div>
<div class="box">
  <div class="innerbox"></div>
  <div class="controlpanel1"></div>
  <div class="controlpanel2"></div>
</div>

---

请参见

这不能完全用css完成，尽管您可以创建类似的内容。提出了几个例子。但是，如果您希望复制这种效果，我建议将Jquery的AJAX功能与数据属性一起使用`

$(".container").hover(function(){
    var $this = $(this),$info = $this.data("info");
    console.log($info);
    $this.html('Your html to replace on hover');
    });

或者类似的解决方法。您可以将链接位置等数据属性添加到html中

<div class="container" data-link="target"></div>

---

然后在$this.html（“HERE”）中的Jquery代码中，您可以添加这些变量，以便容器的每个实例都有一个唯一的输出。

他们使用javascript mouseEnter和mouseLeave…在mouseEnter上，他们切换隐藏和显示覆盖…使用CSSChange span无法实现使用

显示：block；宽度：xxx$(".container").hover(function(){
    var $this = $(this),$info = $this.data("info");
    console.log($info);
    $this.html('Your html to replace on hover');
    });

<div class="container" data-link="target"></div>