Почему кнопки полупрозрачные даже при opacity=1?

Question

[ligisayan]

Привет всем! Есть демо-страница интернет-магазина. Не могу разобраться: почему при наведении на тумбу с товаром (сама область должна становиться полупрозрачной, а кнопки оставаться непрозрачными) кнопки подробнее и сравнения получаются какими и должны быть непрозрачными, а кнопки в корзину, скидка, хит и увеличить остаются полупрозрачными вместе с фоном, хотя на них принудительно стоит opacity=1 при наведении на тумбу?

Answer 1

[Дмитрий Кравченко]

при этом на его родителе opacity: 0.7

.product-frame:hover * {
    opacity: 0.7;
}

.thumbnail-container {opacity:1}
.content-description {opacity:1}

решит проблему

Comments

[ligisayan]

Дмитрий Кравченко да, все правильно - так и должно быть. а те кнопки, которые я хочу делать видимыми принудительно выставляю в opacity=1, только при этом на части кнопок такой финт проходит, а на части нет - вот и вопрос - почему?

[Alex]

ligisayan: opacity действует на все вложенные елементы и переопределить ее нельзя. Наверное это вам и хотел сказать Дмитрий Кравченко

[ligisayan]

Alex: не соглашусь - как это нельзя? вот эта строка, к примеру, переопределяет видимость кнопки сравнения

.product-frame:hover .compare.button {
    opacity: 1;
}

можете убедиться в этом в коде разработчика

[Дмитрий Кравченко]

ligisayan: да, у кнопки opacity: 1, но какой в этом смысл, если

.thumbnail-container {opacity:0.7}
.content-description {opacity:0.7}

и при этом кнопка вложена в оба этих контейнера?

[ligisayan]

Дмитрий Кравченко: ага, ну т.е. фактически .thumbnail-container
.content-description задаем {opacity:1} и все ок. запишите это в вашем ответе и я отмечу его как правильный

Answer 2

[Михаил Чирский]

Лучше сделать не так, вы просто делаете внутренние элементы прозрачными, а лучше фон накладывать, полупрозрачный, например так:

.product-frame:hover
{
    background: rgba(255,255,255,.7);
}

Comments

[ligisayan]

Михаил Чирский немного вас не понял. тогда ведь эффекта накладывания полупрозрачности никакого не наблюдается..

[Михаил Чирский]

ligisayan: https://jsfiddle.net/kt4fru87/
Попытайтесь разобраться

[ligisayan]

Михаил Чирский пока не получается разобраться.. делаю по вашей методике - кнопки становятся не активными и из непрозрачных всего 1.. motors.likemedia.by/shop

[Михаил Чирский]

ligisayan: По вашей ссылке, у вас старый код, где вы задаете все элементам внутри

.product-frame:hover *
{
    opacity: 0.7;
}

Answer 3

[Dmitry Tallmange]

Свойство opacity применяется автоматически ко всем дочерним слоям.

Comments

[ligisayan]

Dmitry Tallmange ок, я с этим согласен., но это не дает ответа на вопрос почему часть кнопок переопределяются с помощью opacity=1, а часть нет

[Dmitry Tallmange]

ligisayan: откровенно говоря, ни разу не встречал, чтобы дети были НЕпрозрачные. Только если они изъяты из стандартного потока вывода, например, с помощью position:absolute. Покажите конкретный код, тогда все встанет на свои места.

[Dmitry Tallmange]

Ой) Зазевался я)