CSS Vue 中使用標籤 i 設定圖示和hover樣式(小技巧)
阿新 • • 發佈:2021-03-04
樣式如下:
方式一:使用圖片
<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(' [email protected]/close.png')
}
.close-icon:hover {
content: url('[email protected]/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>