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

#javascript #html #jquery #css #css3

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



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;
}

  
текст
  
  
  



 
    

Ответы

Ответ 1

Сделайте не .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;
}

  
текст
  
  
  



Ответ 2

еще такой вариант



.frame {
  position: relative;
  display: inline-block;
}
.frame:hover:before{
  content: '';
  position: absolute; top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
}
.frame:hover .on-hover {
  display: block;
  background-color: black;  
}

button {
  display: block;
  background-color: blue;
  color: #fff;
  padding: 10px;
  position: relative;
}
.on-hover {
  display: none;
  position: absolute;
  top: 50%;
  left: 30%;
}
.frame button{
  z-index: 1;
}

  
текст