I have a list of links, and I need to add the class "fade" on 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><divid="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 Code: link