您现在的位置是：网站首页> 编程资料编程资料

vue中如何动态设置css样式的hover_vue.js_

2023-05-24 407人已围观

简介 vue中如何动态设置css样式的hover_vue.js_

vue动态设置css样式的hover

1.定义不同的颜色数组

colorList: ['#4cb352', '#5bc2d3', '#ffc23f', 'pink', '#872822'],//课件标题颜色

2.html数据遍历-自定义element-走马灯高度+定义css变量-yf-border-color

              {{ item.subjectName }}
                            更多课件

3.css添加hover

  .videoBlock {     position: relative;     width: 29%;     height: 220px;     box-sizing: border-box;     color: #ccc;     &:hover {       border: 4px solid var(--yf-border-color, #4cb352);     }     img {       width: 100%;       height: 100%;       display: block;     }   }

vue使用hover.css动画

介绍：

一组 CSS3 驱动的悬停效果，可应用于链接、按钮、徽标、SVG、特色图像等。
轻松应用于您自己的元素、修改或仅用于灵感。
在 CSS、Sass 和 LESS 中可用。

1.下载hover.css

npm i hover.css --save

2. 全局映入css

import 'hover.css'

3.使用类，加上类名 button hvr-bounce-to-left

     天天向上，好好学习

.an {   height: 100px;   width: 200px;   background-color: blueviolet;   border-radius: 10px;   float: left;   margin: 10px;   vertical-align: middle; }

4.拿到想要的样式类名通过f12查看div上面的class类名点击下面链接地址

hover.css 链接地址