Question

我有这个网站：

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

CODE CSS：

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

我尝试创建此效果悬停，但遗憾的是无法正常工作。这是一个典型的例子......我在编写代码时遗漏了一些东西？图片在服务器上。

你能告诉我应该改变什么吗？

提前致谢！

Answer 1

这就是你要找的东西：

＆＃13;

#cont{
  position: relative;
}

#cont:hover > #cover {
  display: block;
}

#img{
  width: 300px;
  height: 350px;
  position: absolute;
  z-index: 1;
}

#cover{
  width: 300px;
  height: 350px;
  position: absolute;
  z-index: 2;
  background: rgba(255,100,10,0.5);
  display: none;
}

＆＃13;

<div id="cont">
  <img id="img" src="http://www.altradona.ro/media/catalog/product/cache/1/small_image/252x252/9df78eab33525d08d6e5fb8d27136e95/l/o/logitech-cordless-optical-trackman.jpg">
  <div id="cover"></div>
</div>

＆＃13;

Answer 2

这个效果可以通过隐藏/不透明度在css中创建：0;容器中的元素，用于保存图像。

我不确定你是否想要将它作为ul来实现，因为它看起来似乎对我来说是语义上的但是我创建了一个jsfiddle here来显示带有div的技术

必不可少的是（在psudo中）

container{
  position:relative;
  [dimensions]
}

container innerHover{
  position:absolute;
  [dimensions]
}

container:hover innerHover{
  [show the hover]
}

Answer 3

这个键是用途：悬停。

示例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：

.box{
  width: 20%;
  min-height:400px;
  background-color: #777;
  display: inline-block;
  box-sizing: border-box;
}

.innerbox{
  width:80%;
  margin-top:10%;
  margin-left:10%;
  margin-right:10%;
  min-height:200px;
  background-color: #444;
}

.controlpanel1{
  display:block;
  min-height: 50px;
  margin-left:10%;
  margin-right:10%;
  background-color: yellow;
}

.controlpanel2{
  display:none;
  min-height: 50px;
  margin-left:10%;
  margin-right:10%;
  background-color: orange;
}

.box:hover .innerbox{
  background-color: #aaa;
}
.box:hover .controlpanel1{
  display:none;
}
.box:hover .controlpanel2{
  display:block;
}

在action

中查看

Answer 4

这不能用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（＆＃34; HERE＆＃34;）中的Jquery代码中，您可以添加这些变量，以便容器的每个实例都具有唯一的输出。

如何创建此效果悬停？

4 个答案: