Add Class to elements other than this Hover

Question

I have a list of links, and I need to add the class "fade" in all elements that are not in Hover.

new Vue({
  el: "#app",
  data: {
    active: false
  },
 methods: {
    mouseOver: function () {
      console.log(this.active)
      this.active = !this.active
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <div class="c-nav-item">
    <!-- -->
    <a class="c-nav-item__single" href="/work" style="" ui-sref="caseStudies" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          Work
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/the-story" style="" ui-sref="the-story" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          The Story
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/us" style="" ui-sref="team.all" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          Us
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/the-juice" style="" ui-sref="blog" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          The Juice
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
    <a class="c-nav-item__single" href="/contact" style="" ui-sref="contact" v-on:mouseover="mouseOver" v-bind:class="{on: active, 'fade': !active}">
      <div class="c-nav-item__inner" style="transform: matrix(1, 0, 0, 1, 0, 0);">
        <h2 class="c-nav-item__text">
          Contact
          <span class="c-nav-item__period">
            .
          </span>
        </h2>
      </div>
    </a>
    <!-- -->
  </div>
</div>

Link to the Code: https://jsfiddle.net/dallington/eywraw8t/45932/

Answer 1

you can use the method mouseOver and mouseLeave to set the item in focus

var app = new Vue({
  el: "#app",
  data: {
    itens: [
      { id: 1, value: 'text 01' },
      { id: 2, value: 'text 02' },
      { id: 3, value: 'text 03' },
      { id: 4, value: 'text 04' }
    ],
    active: 0
  },
  methods: {
    mouseOver: function (id) {
      this.active = id
    },
    mouseLeave: function (id) {
      this.active = 0
    }
  }
})

.item {
  float: left;
  padding: 10px;
  margin: 10px;
  border-radius: 5px;
  border: 1px solid gainsboro;
}

.item.active {
  box-shadow: 0px 0px 5px black
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div v-for="(item, indice) in itens" :key="item.id" class="item" :class="{ active: active == item.id }" @mouseOver="mouseOver(item.id)" @mouseLeave="mouseLeave(item.id)">
    {{item.value}}
  </div>
</div>