Как я могу заставить эту ссылку работать?

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 

Answer 2

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

Свойство Z-индекс определяет порядок стека элемента

Если при увеличении Z-индекс соединения продукта больше, чем 10, то ссылка будет работать.

Попробуйте для продукта связи Z-индекс:

z-index:12;