javascript - 如何在Vue Js中进行选择性悬停？

我想要一个悬停按钮以仅设置其中的嵌套元素的样式。
目前，在我的代码中，将鼠标悬停在单个按钮上将为其所有同级按钮内的嵌套元素设置样式。

有什么建议么？

<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;
}

最佳答案

如果仅关注样式，则可以使用:hover选择器使用纯CSS成功。

您的用例示例：

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

  我想要一个悬停按钮以仅设置其中的嵌套元素的样式。


这是不正确的，您的p标记不在您的button标记内（即使您像这样缩进了代码）。