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. 神经网络优化篇:如何理解 dropout(Understanding Dropout)

    理解 dropout Dropout可以随机删除网络中的神经单元,为什么可以通过正则化发挥如此大的作用呢? 直观上理解:不要依赖于任何一个特征,因为该单元的输入可能随时被清除,因此该单元通过这种方式传 ...

  2. ElasticSearch之系统关键配置

    ElasticSearch之系统关键配置 集群名称 在配置文件$ES_HOME/config/elasticsearch.yml中指定,样例如下: cluster: name: logging-pro ...

  3. 集群化部署ZabbixServer

    修改Zabbix-agent配置 1.修改配置文件 三台zabbix-Server上操作 vim /etc/zabbix/zabbix_agent2.conf Server=127.0.0.1 改成 ...

  4. buuctf 加固题 babypython WriteUp

    原题wp参考链接:https://www.cnblogs.com/karsa/p/13529769.html 这是CISCN2021 总决赛的题,解题思路是软链接zip 读取文件,然后伪造admin的 ...

  5. win10安装WSL

    一.什么是WSL? Windows Subsystem for Linux 简称 WSL,是一个在Windows 10上能够运行原生Linux二进制可执行文件(ELF格式)的兼容层. 二.如何安装WS ...

  6. 【scikit-learn基础】--『监督学习』之 随机森林分类

    随机森林分类算法是一种基于集成学习(ensemble learning)的机器学习算法,它的基本原理是通过对多个决策树的预测结果进行平均或投票,以产生最终的分类结果. 随机森林算法可用于回归和分类问题 ...

  7. MySQL篇:详解MySQL卸载-Windows版

    MySQL篇:第一章_补_MySQL卸载(Windows版) 1. 停止MySQL服务 win+R 打开运行,输入 services.msc 点击 "确定" 调出系统服务. 2. ...

  8. 华为云GaussDB支撑华为MetaERP系统全面替换

    摘要:目前MetaERP已经覆盖了华为公司100%的业务场景和80%的业务量. 本文分享自华为云社区<强渡大渡河!华为云GaussDB支撑华为MetaERP系统全面替换>,作者: 华为云头 ...

  9. 实践案例丨CenterNet-Hourglass论文复现

    摘要:本案例是CenterNet-Hourglass论文复现的体验案例,此模型是对Objects as Points 中提出的CenterNet进行结果复现. 本文分享自华为云社区<Center ...

  10. 火山引擎DataLeap背后的支持者 - 工作流编排调度系统FlowX

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 背景介绍 业务场景 在日常工作中,我们时不时需要对某些逻辑进行重复调度,这时我们就需要一个调度系统.根据不同的调度 ...