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. 关于`dial unix /var/run/docker.sock: connect: permission denied`的处理方法笔记

    之前遇到的一个问题,使用非root用户时操作docker提示无权限,在查阅了一些文章之后自己又摸索出了一些更方便的方法,顺手记录下来. 一.问题发现 根据报错信息dial unix /var/run/ ...

  2. Go 语言为什么不支持并发读写 map?

    大家好,我是 frank ,「 Golang 语言开发栈」公众号作者. 01 介绍 在 Go 语言项目开发中,我们经常会使用哈希表 map,它的时间复杂度是 O(1),Go 语言中的 map 使用开放 ...

  3. 23、Flutter AppBar TabBar TabBarView

    AppBar自定义顶部按钮图标.颜色 class MyHomePage extends StatelessWidget { const MyHomePage({super.key}); @overri ...

  4. 一文带你了解Web前端发展历程

    摘要:自互联网行业发展以来,web前端不断发展变化着.在前人的基础上,后人有幸能够站在前人的肩膀上行走.前端的发展变化不仅是继承式的迭代,同时也是不断的变革和创造. 一.前端到底是个什么? 简单点说, ...

  5. Ambient Mesh:Istio 数据面新模式

    摘要:基于Istio对于Kubernetes生态的完美补充,随着Kubernetes的大规模普及,Istio 数据面新模式 -Ambient MeshIstio也实现了对用户心智以及市场的快速抢占. ...

  6. 高并发中,那些不得不说的线程池与ThreadPoolExecutor类

    摘要:从整体上认识下线程池中最核心的类之一--ThreadPoolExecutor,关于ThreadPoolExecutor的底层原理和源码实现,以及线程池中的其他技术细节的底层原理和源码实现. 本文 ...

  7. Java变异出现错误:No enclosing instance of type XXX is accessible

    摘要:写java代码时遇到下面的编译错误. 本文分享自华为云社区<Java中出现No enclosing instance of type XXX is accessible问题>,作者: ...

  8. 一起玩转玩转LiteOS组件:Opus

    摘要:Opus编码器是一个开源的有损声音编码格式,适用于网络实时声音传输,标准格式为RFC 6716,相对于其他编码格式来说,保真性更好. 本文分享自华为云社区<LiteOS组件尝鲜-玩转Opu ...

  9. web内容如何保护:如何有效地保护 HTML5 格式的视频内容?

    文章资料还没有整理完,现在还不通顺,但是可以做笔记看 HTML是用于创建web页面和web应用程序的公开标准的标记语言.HTML文件基本上是纯文本文件,这意味着软件应用程序和普通人可以轻松地创建.读取 ...

  10. mit6.s081 lab1:Unix Utilities

    1 sleep(easy) 要求:为 xv6实现 UNIX 程序睡眠; 睡眠需要暂停一段用户指定的时间.刻度是由 xv6内核定义的时间概念,即定时器芯片两次中断之间的时间.解决的程序应该在 user/ ...