#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);