Toggle text on mouse hover

Question

I have some text:

Hover me

on positioning the cursor over the text, I would like it to change to:

I'm being hovered

on moving the cursor off, the text should change back to:

Hover me

I can do this with CSS, but I can't figure out how to do it with Vue?

Possible duplicate of [Mouseover or hover vue.js](https://stackoverflow.com/questions/30911933/mouseover-or-hover-vue-js) — D Malan, Apr 13 '19 at 00:26

Matt Oestreich · Answer 1 · 2019-04-13T01:23:01.967

Something like this should work.. easiest if you use a computed property.

CodePen mirror: https://codepen.io/oze4/pen/XQapNP

new Vue({
  el: "#app",
  data: {
    hover: false
  },
  computed: {
    message() {
      return this.hover === true ? "I'm being hovered" : "Hover me";
    }
  },
  methods: {
    handleHover(s){
      this.hover = s;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>


<div id="app">
  <p @mouseover="handleHover(true)" @mouseleave="handleHover(false)">
    {{ message }}
  </p>
</div>

score 1 · Answer 2 · answered Apr 13 '19 at 01:18

You need to define the output you want and a boolean for the hover state, I've called it "hoover"

  data: () => ({
    hoover: false
  }),
  computed: {
    tyext() {
      if (this.hoover === false) {
        return "Hover Me"
      }
      return "I'm being hovered"
    }
  }

Then in the template you can have event listeners to change the boolean.

<p @mouseenter="hoover = true" @mouseleave="hoover = false">{{ tyext }}</p>

You typically wouldn't have logic like this in your template and would instead call a function like this @mouseenter="changeHoover" and change the state but I showed this for brevity, which was kind of pointless as I keep banging on like this.

Toggle text on mouse hover

2 Answers2