vue修改自带的title属性样式,title属性样式修改办法

1.定义id=‘title’ :data-title=“itemss.contactsCallTime2” 这个值

<div  class="grid-content1 bg-purple-light"
                id="title" onmouseover="onMouseHover(event)" onmouseout="onMouseOut()" :data-title="itemss.contactsCallTime2"
              >{{itemss.contactsCallTime2 | filterFun}}</div>

2.定义οnmοuseοver=“onMouseHover(event)” οnmοuseοut=“onMouseOut()” 鼠标事件
鼠标经过时插入样式,鼠标离开时清除样式。

  onMouseHover(ev) {
        document.styleSheets[0].insertRule('#title::before { left: '+ ev.pageX +'px }', 0);
        document.styleSheets[0].insertRule('#title::after { left: '+ ev.pageX +'px }', 0);
    },
 
    onMouseOut() {
        document.styleSheets[0].deleteRule(0);
        document.styleSheets[0].deleteRule(0);
    },
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
Vue HTML自的鼠标悬停方法有 @mouseover()和@mouseleave()。通过使用这两个方法,可以实现鼠标悬停在文字上时文字变色,鼠标离开悬停区域时文字复原颜色的效果。在HTML模板中,可以使用以下代码实现: ```html <div :style="avtivecolor" @mouseover="Mouseover()" @mouseleave="Mouseleave()">悬停区域文字</div> ``` 在data属性中,需要定义一个变量来保存悬停区域文字的原始颜色,代码如下: ```javascript data() { return { avtivecolor: "color:#b8b8b8", // 悬停区域文字原始颜色 } } ``` 然后,在methods属性中,定义两个方法来处理鼠标悬停和离开的事件,代码如下: ```javascript methods: { // 鼠标悬停触发此方法 Mouseover() { console.log("进入悬停区域"); this.avtivecolor = "color:#fede0e"; // 进入悬停区域,更改文字颜色 }, // 鼠标离开触发此方法 Mouseleave() { console.log("离开悬停区域"); this.avtivecolor = "color:#b8b8b8"; // 离开悬停区域,文字颜色复原 } } ``` 这样,当鼠标悬停在悬停区域文字上时,文字的颜色会变为"#fede0e",当鼠标离开悬停区域时,文字颜色会恢复为"#b8b8b8"。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [Vue实现鼠标悬停,高亮显示指定内容](https://blog.csdn.net/weixin_43732080/article/details/106353895)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vue 使用html自title属性 鼠标悬浮展示内容 修改样式](https://blog.csdn.net/m0_49515138/article/details/121701573)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [二开ChatGPT微信小程序源码 AI聊天微信小程序源码 适配H5和WEB端 支持AI聊天次数限制.rar](https://download.csdn.net/download/winkexin/88244216)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

管火火火

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值