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. IntelliJ IDEA下载安装,以及关联gitee

    https://www.jetbrains.com.cn/ 点击下载 IntelliJ IDEA Ultimate 旗舰版(收费) IntelliJ IDEA Community 社区版(免费) 安装 ...

  2. IPTV SQM的项目总结

    本文于2015年底完成,发布在个人博客网站上,标题为<项目总结--纪念我参与过的IPTV SQM项目>. 考虑个人博客因某种原因无法修复,于是在博客园安家,之前发布的文章逐步搬迁过来. 时 ...

  3. 从零玩转设计模式之外观模式-waiguanmos

    title: 从零玩转设计模式之外观模式 date: 2022-12-12 15:49:05.322 updated: 2022-12-23 15:34:40.394 url: https://www ...

  4. 技本功|统计信息对SQL执行效率的影响

    在一个风和日丽的下午,奋哥哥突然接到业务方线上业务数据库CPU资源告警信息,立马放下手里的枸杞登录业务方阿里云控制台查看具体问题. 对于数据库当前正在发生中的问题,我们首先从数据库实时会话信息中尝试抓 ...

  5. 记录一次K8s pod被杀的排查过程

    问题描述 今天下午运维反馈说我们这一个pod一天重启了8次,需要排查下原因.一看Kiban日志,jvm没有抛出过任何错误,服务就直接重启了.显然是进程被直接杀了,初步判断是pod达到内存上限被K8s ...

  6. AI 图像自动补全 Uncrop 工具介绍

    ClipDrop Uncrop是一款基于AI的图像自动补全工具,由StabilityAI旗下的Clipdrop开发.通过利用StableDiffusionXL开发的算法和深度学习技术,Uncrop可以 ...

  7. AI新手语音入门:认识词错率WER与字错率CER

    摘要:本文介绍了词错率WER和字错率CER的概念,引入了编辑距离的概念与计算方法,从而推导得到词错率或字错率的计算方法. 本文分享自华为云社区<新手语音入门(一):认识词错率WER与字错率CER ...

  8. 开心档之MySQL 创建数据库

    MySQL 创建数据库 我们可以在登陆 MySQL 服务后,使用 create 命令创建数据库,语法如下: CREATE DATABASE 数据库名; 以下命令简单的演示了创建数据库的过程,数据名为 ...

  9. Python 获取控制台输入的值

    获取控制台输入参数 if __name__ == '__main__': while 1: question = input('用户:') answer = "你的问题是:" + ...

  10. Jenkins 多分支流水线(SVN)

    实际应用过程中,一般多分支流水线的方式用得比较多一些, master 对应 生成环境 develop 对应 测试环境, 将不同分支的代码构建到不同的环境中 添加 Jenkinsfile 文件 Jenk ...