5

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

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;
}
<div class="frame">
  <p>текст</p>
  <img src="http://s00.yaplakal.com/pics/pics_original/9/3/8/462839.jpg" alt="веселый паровозик" width="200" height="200" />
  <button>кнопка</button>
  <button class="on-hover">выход</button>
</div>

8
  • можно - вы нести кнопки из контейнера, либо делать полупрозрачным не сам контейнер а его части
    – Grundy
    Commented 11 янв. 2016 в 15:04
  • @soledar10 спасибо, но opacity должен срабатывать и на тексте, т.е. по всему блоку. я к тому, что какие-то элементы могут быть и после синей кнопки - тут упрощенный вариант
    – Вася
    Commented 11 янв. 2016 в 15:08
  • соледар? :-) я вообще два варианта предложил - один - вынести, второй плохо выразился, суть - сделать placeholder который будет полупрозрачным и показываться на ховере
    – Grundy
    Commented 11 янв. 2016 в 15:09
  • 1
    элемент который растянется над всем блоком
    – Grundy
    Commented 11 янв. 2016 в 15:12
  • 1
    например с помощью установки z-index
    – Grundy
    Commented 11 янв. 2016 в 15:21

2 ответа 2

6

Сделайте не .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;
}
<div class="frame">
  <p>текст</p>
  <img src="http://s00.yaplakal.com/pics/pics_original/9/3/8/462839.jpg" alt="веселый паровозик" width="200" height="200" />
  <button>кнопка</button>
  <button class="on-hover">выход</button>
</div>

2
  • 1
    в вопросе про обе кнопки было, но суть я думаю понятна :)
    – Grundy
    Commented 11 янв. 2016 в 15:23
  • @Grundy, да, вторую потеряла :)
    – alenkins
    Commented 11 янв. 2016 в 15:36
4

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

.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;
}
<div class="frame">
  <p>текст</p>
  <img src="http://s00.yaplakal.com/pics/pics_original/9/3/8/462839.jpg" alt="веселый паровозик" width="200" height="200" />
  <button>кнопка</button>
  <button class="on-hover">выход</button>
</div>

2
  • 1
    как же долго я собирался дать ответ :-D кстати, в последнем правиле .frame button.on-hover уже не нужен, они же обе button
    – Grundy
    Commented 11 янв. 2016 в 15:32
  • 1
    Grundy поправил
    – soledar10
    Commented 11 янв. 2016 в 16:56

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.