如何添加悬停效果以增加 Vue 标签内文本的大小？

Question

当前代码只放大了图标。有什么方法可以让图标旁边的文字也变大？

<style scoped>
.material-icons:hover {
    transform: scale(1.2);
}
</style>

<template>
    <div @click="folderFinder(folder)" v-for="folder in DisplayedFolders">
         <i class="material-icons">{{folder.DisplayIcon}}</i>
             {{folder.DisplayText}}
    </div>
</template>

Answer 1

我没有 Vue.js 知识，所以不确定这是否有帮助：

如果可以更改标记，可以将 {{folder.DisplayText}} 包装在 <p> 元素或 <span> 中，然后使用 element + element CSS 选择器。像这样：

<style scoped>
.material-icons:hover,
.material-icons:hover + p {
    transform: scale(1.2);
}
</style>

<template>
    <div @click="folderFinder(folder)" v-for="folder in DisplayedFolders">
         <i class="material-icons">{{folder.DisplayIcon}}</i>
         <p>{{folder.DisplayText}}</p>
    </div>
</template>

如果您无法更改标记，则将 class 应用于整个 <div> 容器并在该容器上使用 :hover。

Answer 2

您可以在包含 icon 和 text.

的包装器 class 中应用变换样式

演示：

.transform-me {
  margin-left: 100px;
}

.transform-me:hover {
  transform: scale(1.2);
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

<div class="transform-me">
<i class="material-icons">folder</i>Hello World!
</div>

如何添加悬停效果以增加 Vue 标签内文本的大小？

How to add a hover effect to increase size of text within a Vue tag?

html

css

vue.js

google-material-icons