Как при ховере блока с прозрачностью оставить внутренние элементы видимыми?

Как при ховере элемента и затемнении его с эффектом прозрачности сделать так, чтобы некоторые внутренние элементы (обе кнопки) были видны с исходной непрозрачностью?
button { display: block; background-color: blue; color: #fff; padding: 10px; } .on-hover { display: none; position: absolute; top: 50%; left: 10%; } .frame { position: relative; } .frame:hover { opacity: 0.3; } .frame:hover .on-hover { display: block; background-color: black; }

текст

Ответ

Сделайте не .frame:hover {opacity: 0.3}, а .frame:hover * {opacity: 0.3;}
После чего для исключений установите opacity: 1;
https://jsfiddle.net/mh4vqk1c/
button { display: block; background-color: blue; color: #fff; padding: 10px; } .on-hover { display: none; position: absolute; top: 50%; left: 10%; } .frame { position: relative; } .frame:hover * { opacity: 0.3; } .frame:hover .on-hover { display: block; background-color: black; opacity: 1; }

текст