在scss中如何使用hover(Vue项目)

在Vue项目中使用SCSS时，可以在样式标签中添加lang="scss"属性来启用SCSS。然后可以在样式中定义hover效果。

以下是一个简单的例子：

<template>

  <div class="my-element">

    Hover over me!

  </div>

</template>

 

<script>

export default {

  // ...

}

</script>

 

<style lang="scss">

.my-element {

  background-color: blue;

  color: white;

  padding: 20px;

  transition: background-color 0.3s; // 平滑过渡效果

 

  &:hover {

    background-color: red; // hover时的背景颜色

  }

}

</style>

在这个例子中，当鼠标悬停在.my-element元素上时，它的背景颜色会变成红色。&代表父选择器，即.my-element。transition属性用于使颜色变化有一个平滑的过渡效果。