html - 我怎样才能使这个链接工作？

Question

我有这个网站 (NSFW):

link

当用户点击产品时，应该会转到产品页面。不幸的是，它不起作用……问题出在这段代码上。

.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