Помогите с CSS

[Kozak1991777]

Вот сайт: http://tehnoua.netxi.in/product-category/butovaya-tehnika/boyleru.
Я при помощи css сделал вот что:
1. Обрезал название товаров до одной строки
.product-title-wrapper .product-title{
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
2. Показывает полное название при наведении курсора
.product-title-wrapper .product-title:hover {
white-space: normal;
}
Проблема в том, что если название товара длинное или у товара есть две цены или то и другое, в общем кнопка "В корзину" выезжает за пределы карточки, что смотрится некрасиво. Как вообще скрыть кнопку знаю, но вот как мне совместить, чтобы при наведении курсора показывалось полное название товара и скрывалась кнопка "В корзину"?

 

[tuxfighter]

.product-title-wrapper:hover~div.product-item-meta.add-to-cart-button{
    display: none !important;
}

Пожалуйста оформляйте код нормально

 

[Kozak1991777]

.product-title-wrapper:hover~div.product-item-meta.add-to-cart-button{
    display: none !important;
}

Пожалуйста оформляйте код нормально

Спасибо, что откликнулись, предложенный вами код только скрывает кнопку "В корзину", но не показывает полное название товара.

 

[tuxfighter]

это не замена вашему пункту 2, а дополнение.
пункт 3 можно сказать

 

[Kozak1991777]

это не замена вашему пункту 2, а дополнение.
пункт 3 можно сказать

Спасибо. Работает.