переключение родительского div на дочерний div при наведении курсора

#javascript #css #vue.js

Вопрос:

Я новичок в vuejs, я хочу изменить весь фон (родительский div class = «home») с белого на изображение, наведя курсор на изображение из дочернего div (id =»ds»). Мой код работает, но изменения происходят только в дочернем div. Я новичок в Вейсе. Не могли бы вы, пожалуйста, помочь мне

вот мой сценарий

  methods: {
getData() {
  var ds = document.querySelector('#ds');
    ds.addEventListener('mouseenter', function(){
        this.classList.remove('home');
        this.classList.add('dshov');
})
    ds.addEventListener('mouseleave', function(){
        this.classList.add('home');
        this.classList.remove('dshov');
  })
  },
},
 

а вот и css

 .home{
  background: white;
.dshov{
  background: url('../assets/images/bg.jpg');
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
 

}

Комментарии:

1. this.parentElement.classList... .

2. все то же самое 🙁

3. Пожалуйста, расскажите мне об этом подробнее.

4. шаблон переходит в родительский div, затем внутри него находится div и div2 внутри него и снова div3, а внутри него находится дочерний div, на котором я зависаю,

5. когда я наведу указатель мыши на дочерний div, фон изменится только внутри этого дочернего div, как я могу переключить дочерний div и весь фон изменится?