Question

我有这个网站（NSFW）：

当用户点击产品时，应该转到产品页面。不幸的是它不起作用......问题在于这个代码。

.products-grid li.item:hover:before{
    content: '';
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 80%;
    z-index: 10; //If we delete this code, the link works
    background: url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png");
}
.products-grid li.item .product-info{
    position: relative;

}
.products-grid li:nth-of-type(-n+4):hover:before
{
height: 83.4% !Important;
}

.item:hover .product-name{
display : none;
}

.item:hover .price-box{
display : none;
}

如果删除标记的代码，则链接有效，但叠加效果消失。我怎样才能使两件事都有效？链接和叠加效果。

请告诉我，我该如何修改此代码？

Answer 1

试试这个：

.products-grid li.item .product-image,
.products-grid li.item .product-image > img {
  display: block;
  position: relative;
}
.products-grid li.item .product-image:hover:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2 background: url("http://www.altradona.ro/media/wysiwyg/OVERLAY.png");
}

并删除

的样式

.products-grid li.item:hover:before
.products-grid li.item .product-info

Answer 2

 z-index: 10; //If we delete this code, the link works

z-index属性指定元素的堆栈顺序

如果您将产品链接的z-index增加到10以上，那么链接将起作用。

尝试使用产品链接Z-index：

z-index:12;

如何使此链接有效？

2 个答案: