CSS Vue 中使用标签 i 设置图标和hover样式(小技巧)
样式如下:方式一:使用图片<template><div class="main"><div class="win"><div class="title"><i class="icon close-icon"/></div></div></div></t
·
样式如下:
方式一:使用图片
<template>
<div class="main">
<div class="win">
<div class="title">
<i class="icon close-icon"/>
</div>
</div>
</div>
</template>
<style scoped>
.main {
padding: 20px;
}
.win {
width: 300px;
height: 200px;
background: #ccc;
border-radius: 3px;
}
.title {
height: 30px;
background: mediumaquamarine;
}
.icon {
cursor: pointer;
float: right;
margin: 5px;
}
.close-icon {
content: url('~@images/close.png')
}
.close-icon:hover {
content: url('~@images/close-hover.png')
}
</style>
方式二:使用 el-icon
<template>
<div class="main">
<div class="win">
<div class="title">
<i class="icon el-icon-close"/>
</div>
</div>
</div>
</template>
<style scoped>
.main {
padding: 20px;
}
.win {
width: 300px;
height: 200px;
background: #ccc;
border-radius: 3px;
}
.title {
height: 30px;
background: mediumaquamarine;
}
.icon {
cursor: pointer;
float: right;
margin: 5px;
}
.icon:hover {
color: red;
}
</style>
更多推荐
已为社区贡献33条内容
所有评论(0)