如何在 Vue Js 中进行选择性悬停？答案

【问题标题】：How can I make a selective hover in Vue Js?如何在 Vue Js 中进行选择性悬停？
【发布时间】：2019-08-28 08:47:46
【问题描述】：

我想要一个悬停按钮来设置其中的嵌套元素的样式。目前在我的代码中，将鼠标悬停在单个按钮上会设置其所有兄弟按钮内的嵌套元素的样式。

有什么建议吗？

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

【问题讨论】：

标签： javascript vue.js hover frontend

【解决方案1】：

在您当前的代码中，您只有 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>

【讨论】：

这是我的第一直觉，但我决定不这样做，因为它是一种快捷方式而不是可扩展的代码！

【解决方案2】：

如果您只关心样式，则可以使用 :hover 选择器使用纯 css 取得成功。

您的用例示例：

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

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

这不是真的，你的 p 标签不在你的 button 标签内（即使你缩进了你的代码）。

【讨论】：