[js] - 为子节点增加鼠标移入和移出的样式
var cards = document.querySelectorAll(".card");
for (let index = 0; index < cards.length; index++) {
const card = cards[index];
card.addEventListener("mouseover",function(){
var chils = this.childNodes
for (let i = 0; i < chils.length; i++) {
let e = chils[i];
if(e.nodeType==1 && e.classList.contains('card-info')){
e.classList.remove("fontDown");
e.classList.add("fontUp"); }
}
},false)
card.addEventListener("mouseout",function(){
var chils = this.childNodes
for (let i = 0; i < chils.length; i++) {
let e = chils[i];
if(e.nodeType==1 && e.classList.contains('card-info')){
e.classList.remove("fontUp");
e.classList.add("fontDown");
}
} },false)
}
[js] - 为子节点增加鼠标移入和移出的样式的更多相关文章
- JS鼠标移入,移出事件
该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- JS获取子节点、父节点和兄弟节点的方法实例总结
转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...
- js创建子节点
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- vue的鼠标移入和移出
vue的鼠标移入和移出 需求(鼠标到预约二维码显示,预约添加背景色) 实现 <!--html部分--> <ul class="person_list"> / ...
- js遍历 子节点 子元素
Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- JS实现隔行变色,鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- Vue2.0选中当前鼠标移入移除加样式
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: <template> <div class=" ...
- jq鼠标移入和移出事件
前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...
随机推荐
- NC65元数据添加七彩版时注意点
元数据添加七彩版时注意点 元数据七彩版模式 --- 主要添加Xml文件调整格式 添加时注意点如下 手动创建Panel时 自动生成的实现方法中有一个方法的返回值一定要为true 该方法主要是控制显不显示 ...
- BUUCTF-Crypto详细Writeup
每一天都要努力啊 ----2024-01-01 18:11:36 1.一眼就解密 原题:下面的字符串解密后便能获得flag:ZmxhZ3tUSEVfRkxBR19PRl9USElTX1NUUkl ...
- Python笔记三之闭包与装饰器
本文首发于公众号:Hunter后端 原文链接:Python笔记三之闭包与装饰器 这一篇笔记介绍 Python 里面的装饰器. 在介绍装饰器前,首先提出这样一个需求,我想统计某个函数的执行时间,假设这个 ...
- CodeForces 1009E Intercity Travelling 概率DP
原题链接 题意 给我们一个长为n的序列,要求我们从头开始向右走n个节点,每个位置都有1 / 2的概率将我们传送回1号点之前,不过我们只需要完成走n步的任务就可以了.求我们走过的元素和 乘以 2的n - ...
- Vue接入谷歌广告(Google Adsense)
1.注册账户 首先你要拥有一个google账号,点击注册谷歌账号,点击个人账号根据提示一步一步来即可注册成功.(当然你需要魔法才可以正常访问谷歌服务) 2.补充账户信息,申请广告授权 点击进入Goog ...
- 如何利用动态配置中心在JavaAgent中实现微服务的多样化治理
本文分享自华为云社区<如何利用动态配置中心在JavaAgent中实现微服务的多样化治理>,作者:华为云开源 . 一.前言 随着JavaAgent在微服务治理方面的广泛应用和发展,我们可以在 ...
- Java的这个强大功能,很多人都不知道
摘要:大多数框架采用单一的语言所开发.JNI这项Java中提供的强大功能,却逐渐的被人遗忘了. 本文分享自华为云社区<Java中一个逐渐被遗忘的强大功能,强到你难以置信!!>,作者:冰 河 ...
- CVE-2022-22965 漏洞分析,安全问题早发现
摘要:Spring在进行参数绑定时调用的 BeanWrapperImpl在进行JavaBean操作时触发了此漏洞. 本文分享自华为云社区<CVE-2022-22965 漏洞分析>,作者:X ...
- 百度高德地图JS-API学习手记:地图基本设置与省市区数据加载
无论是百度还是高德地图开发,还是高德地图开发.官方的给的案例启示很多,copy再修改下,就完成了 https://lbs.amap.com/api/javascript-api/summary ht ...
- Solon Web 开发:三、一个简单的 Web 模板项目(或示例)
演示 web 程序的常用能力: 控制器.请求参数.参数校验.跳转 过滤器.全局异常处理 静态文件 动态模板 动态模板公共变量及控制器基类 日志 Json 渲染格式控制 模板下载: 打包成 jar ,可 ...