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. 操作系统大作业:在Linux环境下模拟实现简单命令解释器(代码部分)

    好家伙   1. 题目要求 一.   课程设计(大作业)目的 熟悉Linux编程环境,加强对Linux命令的理解及函数的运用,完成一个操作系统的部分系统的设计过程.编码.调试,锻炼实际应用能力. 二. ...

  2. 关于WPF下用户登录后再启动主窗体的实现方法

    /// <summary>App.xaml 的交互逻辑</summary> public partial class App : Application { private b ...

  3. 谷粒学院通用工具类R类

    import io.swagger.annotations.ApiModelProperty; import lombok.Data; import java.util.HashMap; import ...

  4. MES喷码机联动:MES实时下发设备生产参数及信息,实现从上层系统控制设备输出

    随着工厂数字化的不断转型,设备单机工作已逐渐无法满足工业工厂互联网信息化数字化升级需求,从上层工单拉动设备生产参数的变化以及信息输出已经成为必然趋势. 开发工具:C# WPF 数据库:sqlite3 ...

  5. Android移动、缩放和旋转手势实现

    Android的部分图片编辑应用中需要对图片进行移动.缩放和旋转,这些变化都依赖于触摸手势实现,而本文主要阐述移动.缩放和旋转手势的简单实现. 一.移动 首先需要从触摸事件(MotionEvent)中 ...

  6. 【华为云技术分享】云容器引擎 CCE权限管理实践

    随着容器化的快速发展,大数据原有的分布式任务调度模式,正在被基于Kubernetes的技术架构所取代.CCE云容器引擎是华为云推出的支持Kubernetes社区原生应用和工具,应用级自动弹性伸缩,自动 ...

  7. MySQL事务处理特性的实现原理

    摘要:事务这个词来自于英语中的transactional这个词的翻译,这个词的含义更多的是指 "交易".在数据库系统或者软件系统中我们通常 称 transactional 为事务 ...

  8. CWE 4.7中的新视图:工业控制系统的安全漏洞类别

    摘要:CWE今年的第一个版本在5/1前发布了,做为软件安全的重要分类标准,我们来看下这个版本有那些变化. 本文分享自华为云社区<CWE 4.7中的新视图 -- 工业控制系统的安全漏洞类别> ...

  9. 常用的echo和cat,这次让我折在了特殊字符丢失问题上

    摘要:用过linux的都知道,echo和cat是我们常用的展示内容和写入内容的方式. 本文分享自华为云社区<echo和cat,重定向到文件时,解决特殊字符丢失问题>,作者: 大金(内蒙的) ...

  10. 从下个月开始,App Store 要求使用 Xcode 14 构建的 iOS 16 兼容应用程序

    Xcode 继向开发者发布第一个iOS 16.5 测试版后,苹果公司周二宣布了对开发者向 App Store 提交应用程序的新要求.从下个月开始,Apple 将要求每个应用程序都必须使用 Xcode ...