vue中如何设置鼠标经过切换样式

第一步

在需要设置样式的标签上加上mouseover和mouseout属性，代码如下

<p class="content-p" @mouseover="addActive($event)" @mouseout="removeActive($event)">

@可以替换为v-on：，不影响使用
这里p标签的样式是“content-p”
$event是指当前触发的是什么事件（鼠标事件，键盘事件等）

第二步

在vue的methods里添加addActive和removeActive方法，分别是

     addActive($event) {$event.currentTarget.className = 'content-p active'},removeActive($event) {$event.currentTarget.className = 'content-p'},

其中currentTarget指的是当前目标，$event.currentTarget可以选中当前的目标，并将className属性修改为想要的新属性，这里加入了一个active样式对content-p的属性值做了覆盖，同时在鼠标移走后触发removeActive事件，可以去除之前加入的样式

容易忽视的一个细节：

className后的类可以打乱顺序，但是在css中一定要按顺序写，如active和content-p的顺序不能颠倒。即权重一样的情况下后面声明的会覆盖前面声明的。
举个例子

<div class = "red blue">123</div>
<div class = "blue red">456</div> <style>.red{color : red}.blue{color:blue}
</style>

这种情况，因为blue类比red后声明，所以123和456显示时都是蓝色，跟class后的顺序无关。

vue中如何设置鼠标经过切换样式相关推荐

在 Vue 中实现 sticky 鼠标上滑显示、下滑隐藏的效果
在 Vue 中实现 sticky 鼠标上滑显示.下滑隐藏的效果首先在需要实现该效果的组件中,创建一个数据属性,例如: isStickyVisible: true,并将其初始值设置为 true. 在组 ...
devexpress 中的checkboxlist怎么设置间距_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
怎么在ppt上设置文字滑动的效果html,PPT 中如何设置图片滚动切换效果
我们经常在工作中使用PPT办公软件,在网页上也经常看到一组图片水平滚动或者垂直滚动的效果,你知道PPT 中如何设置图片滚动切换效果吗?今天小编就教一下大家使用PPT 中如何设置图片滚动切换效果. 首先 ...
Excel中如何设置鼠标形状的方法
Excel案例中如何设置鼠标形状呢?通过VBA代码可以设置鼠标形状.对Excel感兴趣的朋友可加Excel学习交流群:284029260,具体参考下面介绍: 在excel工作表中,按下ALT+F11, ...
vue中动态设置背景渐变色
vue中动态设置背景渐变色 1.效果展示 2.核心(动态更换单一的背景颜色也可以使用) <div class="ss" v-bind:style="{ backgr ...
Vue中动态设置页面title
前言更多内容,请访问我的个人博客. 安装依赖 npm install vue-wechat-title --save 复制代码在mian.js中引入 //设置title import VueWe ...
Unity3d设置鼠标指针的样式
- 设置默认指针 Edit->Project Setting->Player->Default Cursor中设置,如下图: - 通过代码设置鼠标指针通过Cursor.SetCur ...
CSS设置鼠标变成手样式
CSS部分 .aa :hover {cursor: pointer; } 你可以使用 CSS 的 cursor 属性来设置鼠标悬停在数据上时的样式.默认情况下,当鼠标悬停在一个链接上时,会显示为手型. ...
vue中如何实现实现中英文切换
一.安装 vue-i18n插件 npm i vue-i18n 二.main.js文件的配置 import VueI18n from 'vue-i18n'Vue.use(VueI18n) // 通过插件 ...

vue中如何设置鼠标经过切换样式

vue中如何设置鼠标经过切换样式

第一步

第二步

容易忽视的一个细节：

vue中如何设置鼠标经过切换样式相关推荐

最新文章

热门文章