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. Python——第五章:logging模块

    logging 模块是 Python 中用于记录日志的官方模块.通过 logging 模块,你可以配置和管理日志的生成.处理和存储. logging.basicConfig()用法 filename: ...

  2. Docker本地部署Firefox火狐浏览器并远程访问

    Docker本地部署Firefox火狐浏览器并远程访问 Firefox是一款免费开源的网页浏览器,由Mozilla基金会开发和维护.它是第一个成功挑战微软Internet Explorer浏览器垄断地 ...

  3. C# / VB.NET 获取PDF文档的数字签名信息

    文档中的数字签名具有不可否认性,可有效防伪防篡改.对文档中已有的数字签名信息,可通过一定方法获取,下面通过程序代码介绍如何来实现.程序中,使用了Spire.PDF.dll,版本:6.11.6,可自行在 ...

  4. 如何用华为云ModelArts平台玩转Llama2

    本文分享自华为云社区<如何用华为云ModelArts平台玩转Llama2>,作者:码上开花_Lancer. 天哪~~ Llama2模型开源了拉!! Llama2不仅开源了预训练模型,而且还 ...

  5. 云小课 | 大数据融合分析:GaussDW(DWS)轻松导入MRS-Hive数据源

    摘要:通过建立GaussDB(DWS)与MRS的连接,支持数据仓库服务SQL on Hadoop,以外表方式实现Hive数据的快捷导入,满足大数据融合分析的应用场景. 本文分享自华为云社区<[云 ...

  6. 云图说|应用魔方AppCube:揭秘码农防脱神器

    摘要: 应用魔方(AppCube)是华为云为行业客户.合作伙伴.开发者量身打造的一款低代码开发平台.通过AppCube可轻松构建专业级应用,创新随心所欲,敏捷超乎想象. 本文分享自华为云社区<云 ...

  7. 华为云联合HarmonyOS重磅发布智联生活行业加速器

    摘要:华为云DevRun智联生活行业加速器,为产业链上下游企业提供技术支持.生态建设.商业变现等多方面的资源扶持,共同打造智联生活新未来. 据IDC的报告,2021年上半年中国智能家居设备市场出货量约 ...

  8. pip升级和卸载安装的第三方库

    pip install --upgrade 第三方库名 pip uninstall 第三方库名

  9. [BitSail] Connector开发详解系列三:SourceReader

    更多技术交流.求职机会,欢迎关注字节跳动数据平台微信公众号,回复[1]进入官方交流群 Source Connector 本文将主要介绍负责数据读取的组件SourceReader: SourceRead ...

  10. Kubernetes(K8S) Deployment 升级和回滚

    创建部署详见 Kubernetes(K8S) Deployment 部署 Pod 传统应用升级,一般是V1.0的jar包,有一个应对 1.0 的 shell 启动脚本.升级时,传 2.0 的 jar包 ...