Блог

Главная - Вопросы по программированию - Как установить непрозрачность svg от 0 до 1 при наведении курсора на родительский элемент?

Как установить непрозрачность svg от 0 до 1 при наведении курсора на родительский элемент?

#html #css #responsive-design

#HTML #css — код #адаптивный дизайн

Вопрос:

Я хотел бы создать оператор наведения курсора на контейнер, где при наведении курсора на родительский элемент он перемещается на 40 пикселей вправо, а желтое поле устанавливает его непрозрачность от 0 до 1. 40 пикселей справа работает просто отлично. Но проблема с коробкой убивает меня.

 .Parent:hover {
  position: absolute;
  transform: translate(40px, 0);
  width: 1180px;
  height: 199px;
  left: 46px;
  top: 50px;
  overflow: visible;
} 
 <div class="Parent">
  <svg class="YELLOW_BOX" viewBox="0 0 1180 140">
<rect class="Yellow_box_class" rx="0" ry="0" x="0" y="0" width="1180" height="140"></rect></svg>
  <div class="TEXT_Class">
    <span>TEXT</span>
  </div>
</div>

Как мне установить непрозрачность «YELLOW_BOX» на 1 при наведении курсора мыши на родительский элемент?

Ответ №1:

Это должно работать

 .parent:hover .yellow_box {
     opacity: 0 !important;
}

Ответ №2:

Спасибо за ответ. Казалось, это решило мою проблему

 .Parent:hover .Yellow_box_class { 
  opacity: 1; 
  fill: rgba(255,237,89,1);