Как я могу сделать выборочное наведение в Vue Js?

Question

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

Есть предложения?

<div id="app">
  <button
   v-on:mouseover="isHovering = true"
   v-on:mouseout="isHovering = false">Button 1
  </button>
    <p v-bind:class="{hovering: isHovering}">
    {{ isHovering ? "Yes" : "No" }}
    </p>
  <button
    v-on:mouseover="isHovering = true"
    v-on:mouseout="isHovering = false">Button 2
  </button>
    <p v-bind:class="{hovering: isHovering}">
    {{ isHovering ? "Yes" : "No" }}
    </p>
</div>

const app = new Vue({
  el: "#app",
  data: {
    isHovering: false
  }
})

.hovering {
  display: red;
}

Answer 1

Если вас интересует только стилизация, вы можете добиться успеха с чистым CSS, используя селектор : hover .

Пример для вашего варианта использования:

button:hover + p {
  background-color: red;
}

Мне нужна кнопка наведения, чтобы стилизовать только вложенные элементы внутри нее.

Это не так, ваши теги p не находятся внутри ваших тегов button (даже если вы ввели свой код как таковой).

Answer 2

В вашем текущем коде у вас есть только 1 свойство данных "isHovering", и оба ваших элемента <p> используют его для условного использования .hovering {display: red}.

Вы можете создать другое свойство данных для второй кнопки. Если у вас будет много кнопок, пытающихся это сделать, ваш код очень быстро выйдет из-под контроля.

<button
  v-on:mouseover="isSecondButtonHovering = true"
  v-on:mouseout="isSecondButtonHovering = false">Button 2
</button>
<p :class="{hovering: isSecondButtonHovering}">
  {{ isSecondButtonHovering ? "Yes" : "No" }}
</p>