new Vue({
  el: '#mouse',
  data: {
    message: 'Hover Me!'
  }, 
  methods: {
    mouseover: function(){
      this.message = 'Good!'
    },    
    mouseleave: function(){
      this.message = 'Hover Me!'
    }
  }
})

body {
  
  background: #333;
  
  #mouse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    width: 280px;
    height: 100px;
    margin: 0 auto;
    line-height: 50px;
    text-align: center;
    color: #fff;
    background: #007db9;

    a {
      display: block;
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
  }
}

<div id="mouse">
  <a
    v-on:mouseover="mouseover"
    v-on:mouseleave="mouseleave">
    {{message}}
  </a>
</div>

How to change div card content on hover in vuejs?

with the help of below code, i am able to successfully change the content on hover. But only issue is.

intially i want to show some image. there after once if user hover the div. then i need to see button. in the same div(only after hover).

CodePudding user response：

you can have a boolean, may be isHover and you conditionnaly show you content. when mouseover, isHover=true, when mouseleave, isHover=false

CodePudding user response：

There is no need to show all the content in the same div. You can also put conditions to show which element at which time example. And put the conditions for first-time show image using the isFirstTime boolean variable.

CodePudding user response：

You could use CSS do to this for you:

#myButton {
  display: none;
}

#mouse:hover #myButton {
  display: block;
}

<div id="mouse">
  <a
    v-on:mouseover="mouseover"
    v-on:mouseleave="mouseleave">
    {{message}}
  </a>
  <button id='myButton'>Test</button>
</div>