1. var cards = document.querySelectorAll(".card");
  2. for (let index = 0; index < cards.length; index++) {
  3. const card = cards[index];
  4. card.addEventListener("mouseover",function(){
  5. var chils = this.childNodes
  6. for (let i = 0; i < chils.length; i++) {
  7. let e = chils[i];
  8. if(e.nodeType==1 && e.classList.contains('card-info')){
  9. e.classList.remove("fontDown");
  10. e.classList.add("fontUp");
  11.  
  12. }
  13. }
  14. },false)
  15. card.addEventListener("mouseout",function(){
  16. var chils = this.childNodes
  17. for (let i = 0; i < chils.length; i++) {
  18. let e = chils[i];
  19. if(e.nodeType==1 && e.classList.contains('card-info')){
  20. e.classList.remove("fontUp");
  21. e.classList.add("fontDown");
  22. }
  23. }
  24.  
  25. },false)
  26. }

[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. 聊聊流式数据湖Paimon(三)

    概述 如果表没有定义主键,则默认情况下它是仅追加 表类型(Append Only Table). 根据桶(Bucket)的定义,我们有两种不同的仅追加模式:"Append For Scala ...

  2. python tkinter使用(十一)

    python tkinter使用(十一) 本篇文章主要讲下tkinter 窗口的一些属性,以及实现无法关闭的窗口中遇到的一些问题. #!/usr/bin/python3 # -*- coding: U ...

  3. Next.js 开发指南 初始篇 | Next.js CLI

    基础篇.实战篇.源码篇.面试篇四大篇章带你系统掌握 Next.js!   前言 欢迎学习 Next.js!在学习具体的知识点之前,我们先来创建一个 Next.js 项目.创建了可运行的项目,才能在学习 ...

  4. centos7 安装 mysqlclient 报错

    报错如下: 解决方法: 先安装依赖: yum install mysql-devel 再安装: pip3 install mysqlclient

  5. 云图说|分钟级构建业务大屏——Astro大屏应用

    本文分享自华为云社区<[云图说]第271期 Astro Canvas一站式数据可视化开发,分钟级构建业务大屏>,作者:阅识风云 . Astro大屏应用(Astro Canvas)是Astr ...

  6. GaussDB技术解读系列之应用无损透明(ALT)

    本文作者 :华为云GaussDB研发高级工程师 藏琦 1.背景 GaussDB作为一款企业级分布式数据库,提供了"同城跨AZ双活.两地三中心.双集群强一致"等极致的高可用容灾能力. ...

  7. 手绘流程图讲解spark是如何实现集群的高可用

    摘要:本文讲述spark是怎么针对master.worker.executor的异常情况做处理的. 本文分享自华为云社区<图解spark是如何实现集群的高可用>,作者:breakDawn. ...

  8. 云图说|Git云上仓库哪家好?一张图了解华为云代码托管服务

    阅识风云是华为云信息大咖,擅长将复杂信息多元化呈现,其出品的一张图(云图说).深入浅出的博文(云小课)或短视频(云视厅)总有一款能让您快速上手华为云.更多精彩内容请单击此处. 摘要: 云办公时代已然到 ...

  9. 华山论“件”:Kafka、RabbitMQ、RocketMQ技能大比拼

    摘要:主流的消息中间件包含Kafka.RabbitMQ和RocketMQ,本期云图说为您介绍它们之前的差异. 本文分享自华为云社区<第234期 华山论"件"-Kafka.Ra ...

  10. 【终极教程】Cocos2dx服务端重构(优化cocos2dx服务端)

    [终极教程]Cocos2dx服务端重构(优化cocos2dx服务端) 文章目录 概述 问题概述1. 代码混淆代码加密具体步骤测试和配置阶段IPA 重签名操作步骤2. 缺乏文档3. 缺乏推荐的最佳实践4 ...