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

The current code only enlarges the icon. What is the way to make it so that the text next to the icon also enlarges?

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

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

CodePudding user response：

I do not have Vue.js knowledge so not sure if this is helpful:

If you can change the markup, you could wrap {{folder.DisplayText}} in a <p> element or a <span> and then use element element CSS selector. Something like this:

<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 >{{folder.DisplayIcon}}</i>
         <p>{{folder.DisplayText}}</p>
    </div>
</template>

If you can't change the markup, then apply a class to the whole <div> container and use the :hover on that container.

CodePudding user response：

You can apply transform style in the wrapper class which contains both icon as well as the text.

Demo :

.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 >
<i >folder</i>Hello World!
</div>