[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两个方法. 但是在编写页面的过程中,无论 ...
随机推荐
- 浅谈JSP中forward和redirect
redirect 重定向,完全的跳转,浏览器将会得到跳转的地址,并重新发送请求链接 forward 转向,浏览器中不会显示后面的网址;如果你需要在下一个页面中能从中获取新的信息的话,你可以Reques ...
- [VMware]ESXI下硬盘的两种直通方式
文章来自:https://rmbz.net/archives/vmware-esxi-passthrough 最近再搞ESXI,把原来的"黑群晖"改成ESXI:因为群晖里有数据,为 ...
- 一个简单的Python暴力破解网站登录密码脚本
目录: 关键代码解释 完整代码 方法一 运行结果 方法二 运行结果 测试靶机为DVWA,适合DVWA暴力破解模块的Low和Medium等级 关键代码解释 url指定url地址 url = " ...
- Feign源码解析:初始化过程(三)
背景 前面两篇讲了下,在一个典型的引入了feign.loadbalancer.nacos等相关依赖的环境中,会有哪些bean需要创建. 其中第一篇讲了非自动配置的bean,第二篇是自动配置的bean. ...
- Spring事务状态处理
Spring事务提交后执行:深入理解和实践 在Java开发中,Spring框架的事务管理是一个核心概念,尤其是在企业级应用中.理解和正确使用Spring事务对于保证应用的数据一致性和稳定性至关重要.本 ...
- ChatGPT Prompts整理总结
最近一直在学习ChatGPT Prompt的编写技巧,做了一些验证和整理,分享给大家 Act as a Linux Terminal 英文Prompt I want you to act as a l ...
- linux centos8 安装php nginx mysql 运行phpcms网站
重新换vps,用centos8,重新配置系统环境,记下笔记: 安装nginx与php 首先安装nginx php ,安装默认版本的nginx,php默认安装7 yum install nginx ph ...
- PPT 版面的规则和精髓
排版四原则 对齐 对比 亲密 重复 背景图 案例
- ME5A报表增强
一.ME5A报表新增长文本字段 结构中添加字段 在该方法下添加对应的取值逻辑 二.ME5A点击科目分配按钮界面添加字段 结构中添加字段 对应位置写取值逻辑 定期更文,欢迎关注 TRANSLATE wi ...
- 42 干货系列从零用Rust编写负载均衡及代理,wmproxy中配置tcp转websocket
wmproxy wmproxy已用Rust实现http/https代理, socks5代理, 反向代理, 静态文件服务器,四层TCP/UDP转发,七层负载均衡,内网穿透,后续将实现websocket代 ...