时间戳

首页 > 解决方案 > 使用 Vue.js 将鼠标悬停在元素上时如何更改背景图像？

javascript - 使用 Vue.js 将鼠标悬停在元素上时如何更改背景图像？

问题描述

将鼠标悬停在四个不同的元素上时，我必须更改背景图像（每个元素一个图像）

我试过这个：

HTML：

<div class="projects">
  <a v-on:mouseover="hover=myimage1" v-on:mouseout="hover=myimage1">
    <router-link to="/project1">Project1</router-link>
  </a>

  <a v-on:mouseover="hover=myimage2" v-on:mouseout="hover=myimage1">
    <router-link to="/project2">Project2</router-link>
  </a>

  <a v-on:mouseover="hover=myimage3" v-on:mouseout="hover=myimage1">
    <router-link to="/project3">Project3</router-link>
  </a>

  <a v-on:mouseover="hover=myimage4" v-on:mouseout="hover=myimage1">
    <router-link to="/project3">Project3</router-link>
  </a>
</div>

<div class="images">
  <div id="img1">
    {{ hover }}
  </div>
</div>

脚本：

<script>
import myimage from '../assets/images/posters/poster1-2.png'
import myimage2 from '../assets/images/front2.png'
import myimage3 from '../assets/images/front3.png'
import myimage4 from '../assets/images/front4.png'
export default {
  name: 'Index',
  data () {
    return {  
      hover: '',        
      myimage1,
      myimage2,
      myimage3,
      myimage4
    }
  }
}
</script>

问题是它不显示实际图像，而是显示字符串：

/static/img/poster1-2.e797348.png

我该怎么办？

标签： javascripthtmlvue.js

解决方案

您可以使用 CSS 轻松解决此问题，只需为每个图像背景创建一个类并将其直接放入<router-link class="..." ...>（无需在元素内部）<router-link>。<a>

这是一个纯 HTML 示例：

<html>
  <head>
    <style>
     .btn {
         font-size: 1rem;
         background-color: #fff;
         cursor: pointer;
         padding: 2rem 4rem;
     }

     .btn:hover {
         background-image: url(https://picsum.photos/200);
         color: #fff;
     }
    </style>
  </head>

  <body>
    <button class="btn">
      Hover Me
    </button>
  </body>

</html>

推荐阅读