Как при Hover на дочерний элемент изменить родительский элемент (кнопка внутри блока)?

Question

[Рахэб Ватаниар]

Есть Button , при ховере на неё border должно произойти li:nth-child(1){background: #49cbcd;} и после того как я уберу курсор, вернеться дефолтный бг из style.css

Comments

[sim3x]

код - текстом, в тег code

Спасибо

Answer 1

[Sergiu Mitu]

На jQuery так:

$('button').on('mouseover', function(){
	$(this).parent().css({'background': '#ff0000'});
});

в данном случае родитель это li, если нужно родителя выше то так:

$('button').on('mouseover', function(){
	$(this).parents('.parent-class').css({'background': '#ff0000'});
});

Comments

[Рахэб Ватаниар]

может я туплю, но это решение мне не помогло)
принцип тот , но проблема остаётся не решенной

[Sergiu Mitu]

замените .parent-class на ваш класс

[Рахэб Ватаниар]

менял, ща покажу что получается

[Рахэб Ватаниар]

Сергей:

и вот что произойдет если сделать вот так))))

$(this).parents().css({'background': '#49cbcd'});

в принципе работает , но я не знаю как указать новый путь и после того как убрал курсор, вернуть все как по дефолту

[Рахэб Ватаниар]

Сергей: может как то при наведении добавить класс этому ul li:first-child
по типу обозвать его каким то классом ( .element ) , и при наведении на button , к .element добавить класс в котором прописать нужный бг?

[Sergiu Mitu]

Pholish: можно и так

$('button').on('mouseenter', function(){
	$(this).parents('.parent-class').addClass('hovered-class');
}).on('mouseleave', function(){
	$(this).parents('.parent-class').removeClass('hovered-class');
});