Как сделать при наведение на один блок, hover срабатывал на другом?

Question

[lemonlimelike]

Есть вот input

<div class="box-item">
							<div class="add_file">Добавить видео</div>
							<input type="file" name="load_file">
						</div>

Нужно чтоб при наведение на input[type="file"] эффект шел на .add_file
Сделал так но чет не работает:

input[type="file"]{
	padding:10px 30px;
	opacity: 0;
	filter:alpha(opacity:0);
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.add_file{
	z-index: 1;
	position: absolute;
	color: #08c;
	cursor: pointer;
	display: inline-block;
	font-weight: 400;
	letter-spacing: .5px;
	text-transform: uppercase;
	border: 1px solid #08c;
	padding: 10px 30px;
	background: #fff;
	transition: all 0.2s;

}
input[type="file"] .add_file:hover {
	background: #08c;
	color: #fff;
}

Answer 1

[User Unknown]

.add_file:hover + input[type="file"]

Comments

[User Unknown]

Можно только так. Иначе поменяйте местами элементы или с помощью js

Answer 2

[Stalker_RED]

+ или ~ https://www.w3schools.com/css/css_combinators.asp
Пример: https://jsfiddle.net/7zucq2jd/

Правило input[type="file"] .add_file:hover будет применяться к .add_file который внутри input (это невозможно же) и при этом на него наведена мышь. Не сработает совсем, крч.

Comments

[lemonlimelike]

крч я сделал