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] - 为子节点增加鼠标移入和移出的样式的更多相关文章

  1. JS鼠标移入,移出事件

    该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...

  2. js获取子节点和修改input的文本框内容

    js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...

  3. JS获取子节点、父节点和兄弟节点的方法实例总结

    转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...

  4. js创建子节点

    <!DOCTYPE html><html>    <head>        <meta charset="UTF-8">      ...

  5. vue的鼠标移入和移出

    vue的鼠标移入和移出 需求(鼠标到预约二维码显示,预约添加背景色) 实现 <!--html部分--> <ul class="person_list"> / ...

  6. js遍历 子节点 子元素

    Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...

  7. JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变

    思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...

  8. JS实现隔行变色,鼠标移入高亮

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...

  9. Vue2.0选中当前鼠标移入移除加样式

    本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: <template> <div class=" ...

  10. jq鼠标移入和移出事件

    前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...

随机推荐

  1. 浅谈JSP中forward和redirect

    redirect 重定向,完全的跳转,浏览器将会得到跳转的地址,并重新发送请求链接 forward 转向,浏览器中不会显示后面的网址;如果你需要在下一个页面中能从中获取新的信息的话,你可以Reques ...

  2. [VMware]ESXI下硬盘的两种直通方式

    文章来自:https://rmbz.net/archives/vmware-esxi-passthrough 最近再搞ESXI,把原来的"黑群晖"改成ESXI:因为群晖里有数据,为 ...

  3. 一个简单的Python暴力破解网站登录密码脚本

    目录: 关键代码解释 完整代码 方法一 运行结果 方法二 运行结果 测试靶机为DVWA,适合DVWA暴力破解模块的Low和Medium等级 关键代码解释 url指定url地址 url = " ...

  4. Feign源码解析:初始化过程(三)

    背景 前面两篇讲了下,在一个典型的引入了feign.loadbalancer.nacos等相关依赖的环境中,会有哪些bean需要创建. 其中第一篇讲了非自动配置的bean,第二篇是自动配置的bean. ...

  5. Spring事务状态处理

    Spring事务提交后执行:深入理解和实践 在Java开发中,Spring框架的事务管理是一个核心概念,尤其是在企业级应用中.理解和正确使用Spring事务对于保证应用的数据一致性和稳定性至关重要.本 ...

  6. ChatGPT Prompts整理总结

    最近一直在学习ChatGPT Prompt的编写技巧,做了一些验证和整理,分享给大家 Act as a Linux Terminal 英文Prompt I want you to act as a l ...

  7. linux centos8 安装php nginx mysql 运行phpcms网站

    重新换vps,用centos8,重新配置系统环境,记下笔记: 安装nginx与php 首先安装nginx php ,安装默认版本的nginx,php默认安装7 yum install nginx ph ...

  8. PPT 版面的规则和精髓

    排版四原则 对齐 对比 亲密 重复 背景图 案例

  9. ME5A报表增强

    一.ME5A报表新增长文本字段 结构中添加字段 在该方法下添加对应的取值逻辑 二.ME5A点击科目分配按钮界面添加字段 结构中添加字段 对应位置写取值逻辑 定期更文,欢迎关注 TRANSLATE wi ...

  10. 42 干货系列从零用Rust编写负载均衡及代理,wmproxy中配置tcp转websocket

    wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,七层负载均衡,内网穿透,后续将实现websocket代 ...