[js] - 为子节点增加鼠标移入和移出的样式
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] - 为子节点增加鼠标移入和移出的样式的更多相关文章
- JS鼠标移入,移出事件
该事件的效果就像百度首页的设置选项,当鼠标移入,移出时的效果,废话不多说了,直接上码. <!DOCTYPE html><html lang="en">< ...
- js获取子节点和修改input的文本框内容
js获取子节点和修改input的文本框内容 js获取子节点: $("#"+defaultPVItemId).children().eq(3); //获取某个选择器下的第四个子节点 ...
- JS获取子节点、父节点和兄弟节点的方法实例总结
转自:https://www.jb51.net/article/143286.htm 本文实例讲述了JS获取子节点.父节点和兄弟节点的方法.分享给大家供大家参考,具体如下: 一.js获取子节点的方式 ...
- js创建子节点
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- vue的鼠标移入和移出
vue的鼠标移入和移出 需求(鼠标到预约二维码显示,预约添加背景色) 实现 <!--html部分--> <ul class="person_list"> / ...
- js遍历 子节点 子元素
Js 节点 子元素 属性 方法 // 添加子节点前 删除所有子节点 var usernameEle = document.getElementById("username"); v ...
- JS学习笔记 - fgm练习 - 鼠标移入/移出div样式改变
思路: div的默认样式正常设置. 鼠标移入时,发生改变的样式有3个,即 边框颜色,div背景色,字体颜色. 把这三个css改变设置在一个类名下,再通过js给div动态 添加/去除这个类名,实现div ...
- JS实现隔行变色,鼠标移入高亮
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 31.0px Consolas; color: #2b7ec3 } p.p2 { margin: 0.0px ...
- Vue2.0选中当前鼠标移入移除加样式
本人写的小程序,功能还在完善中,欢迎扫一扫提出宝贵意见! 效果如gif动态图所示: 1.通过v-for遍历数组 HTML代码: <template> <div class=" ...
- jq鼠标移入和移出事件
前几天帮朋友做了一个单页面,其中有个效果就是鼠标移动到头像上变换头像样式,当鼠标移出时恢复头像样式.当时没多想,脑子就蹦出了mouseover,mouseout两个方法. 但是在编写页面的过程中,无论 ...
随机推荐
- javacv实现屏幕录制(一)
javacv实现屏幕录制(一) javacv从入门到入土系列,发现了个好玩的东西,视频处理,于是我想搞个屏幕录屏,我百度了一下,copy那些代码我没有实现过,那些代码也没有说明,只好去官网看文档找资料 ...
- 斯坦福 UE4 C++ ActionRoguelike游戏实例教程 10.控制台变量的用法 & 静态函数库 & 使用对象通道对碰撞进行控制
斯坦福课程 UE4 C++ ActionRoguelike游戏实例教程 0.绪论 概述 本文对应Lecture 15, 61 - Console Variables for debugging and ...
- Docker 使用及常见问题总结
一.使用 1.docker run -it 命令中的 it 参数是什么含义 在Docker中,-it是两个选项的组合,用于在交互式模式下运行容器.让我解释一下它们的含义: -i 或 --interac ...
- Spring源码学习笔记7——Spring bean的初始化
一丶前言 上篇中我们了解了Spring bean的实例化--存在方法覆盖的使用CGLIB动态代理生成子类,反之反射调用构造函数.实例化后bean中的字段都是默认值,接下来就是对bean的属性进行填充, ...
- Rasa中的tracker_store和event_broker
Rasa 中的 tracker_store 相对主流为 Redis,event_broker 相对主流为 RabbitMQ.后续为了研究学习直接将 tracker_store 和 event_br ...
- 华为云云原生视窗:一文回顾Q1精彩瞬间
摘要:一文速览2023年Q1期间华为云云原生相关动态信息. 华为云云原生动态 华为云海外首发CCI Serverless容器服务 在MWC23 巴展期间,华为云海外首发CCI Serverless容器 ...
- 教你如何在Python中读,写和解析CSV文
摘要:在这篇文章中关于"在Python如何阅读CSV文件"中,我们将学习如何读,写和解析的CSV文件的Python. 您知道将表格数据存储到纯文本文件背后的机制是什么吗?答案是CS ...
- vue2升级vue3:Vue Router报错,directly inside <transition> or <keep-a
vue3 报这个错误: vue-router.mjs:35 [Vue Router warn]: <router-view> can no longer be used directly ...
- 如何用Xcode安装ipa
Xcode安装ipa iOS APP上架App Store其中一个步骤就是要把ipa文件上传到App Store! 下面进行步骤介绍! 利用Appuploader这个软件,可以在Windows.L ...
- Go--统计数组中重复的元素及重复次数
代码: package main import ( "fmt" ) func main() { //创建有重复数值的数组 a1 := []int{1, 2, 3, 1, 4, 5, ...