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. 数字孪生系统融合GIS系统能够在洪涝灾害防治上带来什么帮助?

    数字孪生技术与GIS系统的融合,为防治洪涝灾害方式带来了巨大的改变.这种整合的力量超越了过去单一技术的局限,为防洪抗灾工作提供了更全面.更准确的决策支持和应急响应能力. 在过去,防洪抗灾工作主要依赖于 ...

  2. Vue3节流指令封装

    节流指令 import { ObjectDirective } from 'vue' interface ThrottleEl extends HTMLElement { throttleEvent: ...

  3. 【.NET开发福音】使用Visual Studio将JSON格式数据自动转化为对应的类

    前言: 这段时间一直在做一个第三方平台的对接,对接第三方其实无非就是请求调用第三方的相关接口接收返回过来的相关参数.因此在这个过程中就会涉及大量的JSON响应参数或者请求参数转化为对应的实体类的情况, ...

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

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

  5. 华为云PB级数据库GaussDB(for Redis)揭秘第13期:如何搞定推荐系统存储难题

    摘要:GaussDB(for Redis)轻松搞定推荐系统核心存储,为企业级应用保驾护航. 本文分享自华为云社区<GaussDB(for Redis)揭秘第13期:如何搞定推荐系统存储难题?&g ...

  6. 你会几种读取/加载 properties配置文件方法

    摘要:在java项目中经常会使用到配置文件,这里就介绍几种加载配置文件的方法. 本文分享自华为云社区<[Java]读取/加载 properties配置文件的几种方法>,作者:Copy工程师 ...

  7. 一图解析MySQL执行查询全流程

    摘要:当我们希望MySQL能够以更高的性能运行查询时,最好的办法就是弄清楚MySQL是如何优化和执行查询的. 本文分享自华为云社区<mysql执行查询全流程解析>,作者:breakDraw ...

  8. 火山引擎 DataTester:一个 A/B 测试,将一款游戏的核心收益提升了 8%

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 随着社会节奏及生活方式的改变,休闲游戏在移动游戏市场的占比逐渐升高,据伽马数据发布的<2022 年休闲游戏发 ...

  9. Kubernetes(K8S) 拉取镜像 ImagePullBackOff pull access denied

    K8S 拉取阿里云镜像  第一次用时,没注意 授权,所以在 kubectl apply 后一直出现  ImagePullBackOff [root@k8smaster ~]# kubectl appl ...

  10. django基本流程

    创建项目 django-admin startproject web cd web python manage.py startapp weblist 生成迁移文件 python manage.py ...