Сделайте элемент div прозрачным, с непрозрачным содержимым при наведении - PullRequest
Новая
       34

Сделайте элемент div прозрачным, с непрозрачным содержимым при наведении

0 голосов
/ 01 мая 2018

У меня есть <div id='a'>, который становится прозрачным при наведении на родительский элемент. Но содержимое div должно быть непрозрачным. Код следующий: 

.changer{        
    background-color: gray;
    opacity:0;
    display: block;
    transition: .5s ease;
    backface-visibility: hidden;
}

.mb-4:hover .changer{
    opacity: 0.6;
}
<a href="#" class="d-block mb-4">
    <div id="a" class="changer d-inline">The text that must be non-transparent</div>
    <img class="img-fluid img-thumbnail" src="images/barcelona.jpg" alt="">  <!--this element is not very important-->
</a>

Ответы [ 2 ]

0 голосов
/ 01 мая 2018

Используйте прозрачность фона CSS3, чтобы изменить видимый фон div / img / независимо от содержимого внутри него. 

.inner {
  color: black;
  background: rgba(128, 0, 128, 0.25);
  transition: .5s ease;
  height: 3em;
}

.outer:hover .inner {
  background: rgba(128, 0, 128, 0.75);
  height: 4em;
}

.outer .inner div {
  width: 10em;
  height: 2em;
  background: gray;
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
<a href="#" class="outer">
  <div class="inner">
    <div>Hover over me</div>
  </div>
</a>

EDIT

Модифицированный фрагмент кода, доказывающий, что на внутренний div не влияют изменения, внесенные во внешние div.

РЕДАКТИРОВАТЬ 2

Чтобы изменить прозрачность текста: 

.inner {
  background: rgba(128, 128, 128, 0);
  color: rgba(0, 0, 0, 0);
  transition: .5s ease;
}

.outer:hover .inner {
  background: rgba(128, 128, 128, 1);
  color: rgba(0, 0, 0, 1);
  /* alternative: change the text color itself instead of changing opacity */
}

a,
a:visited,
a:hover,
a:active {
  text-decoration: none;
}
<a href="#" class="outer">
  <div class="inner">Hover over me</div>
</a>
0 голосов
/ 01 мая 2018

используйте цвет фона для этого скажем, если вы хотите сделать div полупрозрачным, а фон белым, то вам нужен следующий код: 

background: rgba(255,255,255,0.6);

здесь необходимо использовать значение rgb, а последнее значение 0,6 - это уровень непрозрачности, (255,255,255) - код цвета для белого, любой цвет можно изменить, изменив значения.

удалить атрибут background-color и opacity

...