jQueryだと、mouseover
を使うことになると思います。
ただし、vueで使用すると、mouseoverした瞬間だけ、メソッドが実行されます。
なんで、正確にmouseoverした時だけ表示する方法です。
結論から言うと、mouseenter
とmouseleave
を使います。
vue.js
const topicForm = Vue.extend({
data: function() {
return {
LinkIconActive: false,
ImageIconActive: false
}
},
methods: {
LinkIconDescriptionShow: function() {
return this.LinkIconActive = true
},
LinkIconDescriptionHidden: function() {
return this.LinkIconActive = false
}
}
})
html.slim
i.fa.fa-link.@mouseenter="LinkIconDescriptionShow" @mouseleave="LinkIconDescriptionHidden"
methodsが二つ生えて、ダサいけど、こんな感じになるかと思います。
もっといい書き方があれば、教えて下さいm(_ _)m