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. 独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案!

    原文章来自:独立于 Github,更方便地管理自己的静态网站?来试试这套自托管 Git 仓库方案! - Sxrhhh 的个人小站 就在前几天,我成功地将我自己的网站由 wordpress 迁移为了静态 ...

  2. Redis 使用的 10 个小技巧

    Redis 在当前的技术社区里是非常热门的.从来自 Antirez 一个小小的个人项目到成为内存数据存储行业的标准,Redis已经走过了很长的一段路. 随之而来的一系列最佳实践,使得大多数人可以正确地 ...

  3. 聊聊ChatGLM-6B的源码分析

    基于ChatGLM-6B第一版,要注意还有ChatGLM2-6B以及ChatGLM3-6B 转载请备注出处:https://www.cnblogs.com/zhiyong-ITNote/ Prefix ...

  4. servlet怎么实现第一个程序和实现下载文件

    简单介绍一下servlet是什么:1:Servlet是sun公司提供的一门用于开发动态web资源的技术 2:我们若想用发一个动态web资源,需要完成以下2个步骤: 第一步:1.编写一个Java类,实现 ...

  5. Java 集合(二) Map

    Map 定义的是键值对的映射关系,一般情况下,都会选择 HashMap 作为具体的实现,除了 HashMap 之外,另一个使用到的比较多的 Map 实现是 TreeMap HashMap 构造函数 H ...

  6. Java面试必考:什么是字节码?采用字节码的好处?

    Java面试必考:什么是字节码?采用字节码的好处? 于哥你好,最近在java面试中被问答到什么是字节码?采用字节码的好处是什么?瞬间懵了,如果你连这个都不知道,我保证你面试GG! 首先说下Java的优 ...

  7. POJ 2609 DP 双队列DP

    POJ 2609 DP 双队列DP 题意 给出队列容量与一组数,并且我们有两个这样容量的空队列,要求我们按照次序把数装进两个队列中,输出最多能装多少以及每个数装进哪个队列. 思路 由于按照次序来装,不 ...

  8. 13、Flutter AspectRatio 调整子元素child的宽高比

    AspectRatio的作用是根据设置调整子元素child的宽高比.   childAspectRatio 是 GridView 和 AspectRatio 控件中的一个参数   AspectRati ...

  9. Asp .Net Core系列:对VS 2019中ASP.NET Core项目解决:The term 'Add-Migration' is not recognized as the name of a cmdlet, function, script file, or operable program. Check the spelling of the name

    错误: Add-Migration : The term 'Add-Migration' is not recognized as the name of a cmdlet, function, sc ...

  10. 618狂欢结束,来聊聊华为云GaussDB NoSQL的蓬勃张力

    又到了一年一度的 618大促的时候,随着近十年网上购物的兴起,各大平台在不同的时期推出各种购物促销活动,极大的促进了消费,刺激了市场.同样,在科技领域,为了支撑突然而来的高并发,支持千万人同时在线浏览 ...