0

Делаю следующим образом, но не получается!

<div class="element-hover">
  <div class="text">
    <h5>Александра</h5>
    <p>Специалист по правильному питанию</p>
    <a href="#"><i class="fa fa-vk"></i></a>
    <a href="#"><i class="fa fa-facebook"></i></a>
  </div>
</div>

ul li:hover .element-hover {
  height: 211px;
  width: 200px;
  opacity: 1;
  position: absolute;
  left: 0px;
  top: 30px;
  background-color: #000000;
  opacity: 0.4;
}

.text h5 {
  font-size: 14px;
  opacity: 1;
}
1
  • Исправьте css или html! В приведенном выше примере нет ul списка! И какой блок должен быть прозрачным, а какой нет? 3 мар 2016 в 8:20

2 ответа 2

1

div.element-hover{opacity: устанавливает прозрачность для всего блока, вложенные не наследуют, просто для них установлено значение в родителе. Это же логично :-) Ведь блок по определению — единое целое. Надо просто весь остальной текст, собрать в соседний блок, и уже ему устанавливать прозрачность. Вот пример: http://jsfiddle.net/ankitest/phnf89q6/embedded/result/

Есть и другой способ, смотря для какой задачи. Установить цвет фона и границы (возможно и шрифта, опять таки, смотря для какой задачи) блока div прозрачным, через rgba(0,0,0,0).

0

Возможно, вы пытаетесь сделать вот так:

.element-hover {
  height: 211px;
  width: 200px;
  position: absolute;
  left: 0px;
  top: 30px;
  background-color: rgba(0,0,0,.5);
}

.text h5 {
  font-size: 14px;
}
<div class="element-hover">
  <div class="text">
    <h5>Александра</h5>
    <p>Специалист по правильному питанию</p>
    <a href="#"><i class="fa fa-vk"></i></a>
    <a href="#"><i class="fa fa-facebook"></i></a>
  </div>
</div>

1
  • я уже разобрался. спасибо большое)
    – Игорь
    3 мар 2016 в 8:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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