JS小技巧：鼠标悬停事件

article/2025/9/5 15:47:09

简单的JS悬停图片变换

  • 不多bb先看效果图
    在这里插入图片描述在这里插入图片描述
  • 可以看到鼠标悬停在不同的标题上时，下方的图片会产生相应变换

代码如下

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}body,html {width: 100%;height: 100%;}#box {width: 730px;height: 335px;background-color: #ffcccc;margin: 250px auto 0 auto;}.top {position: absolute;list-style: none;cursor: pointer;}li {float: left;width: 182.5px;height: 44px;line-height: 44px;text-align: center;cursor: pointer;font-size: 18px;background: rgba(255,255,255,0.5);}li.active{background: rgba(255,255,255,0);color: white;}.bg{width: 730px;height: 335px;background: url(../img/0.jpg);}</style></head><body><div id="box"><ul class="top"><li class="active">新流派龙吟</li><li>红尘羁绊</li><li>区域链赋能</li><li>会呼吸的江湖</li></ul><div class="bg"></div></div><script type="text/javascript" src="../js/jquery-3.2.1.js"></script><script>$('#box .top li').hover(function ni(){$(this).addClass('active').siblings().removeClass('active');$('.bg').css('background-image','url(../img/'+$(this).index()+'.jpg)')})</script></body>
</html>
  • 注意在script当中的$选择选择器是中间用" "隔开，最重要的一点：图片的路径是连续的，看清楚路径不然加载不了图片
  • 如需原图QQ3054718283

http://chatgpt.dhexx.cn/article/ZVLEy6ru.shtml

相关文章

js鼠标事件

js鼠标事件

通过鼠标触发事件, 类似用户的行为: 属性 描述 onclick 当单击鼠标时运行脚本 ondblclick 当双击鼠标时运行脚本 onmousedown 当按下鼠标按钮时运行脚本 onmousemove 当鼠标指针移动时运行脚本 onmouseout 当鼠标指针移出元素时运行脚本 onmouseover 当鼠标指针移…
阅读更多...
用js给div添加鼠标悬停事件

用js给div添加鼠标悬停事件

新任务:给表格上的某列添加鼠标悬浮事件 但是表格是由omGrid生成的,无法修改 所以只能先获取,再添加事件 先用firebug看清表格结构:\ 是div class"innerCo1 " class还是有空格的,为此还纠结了下.. js代码: var obj document.getElementsByTagName("div&quo…
阅读更多...
JavaScript的DOM之鼠标悬浮事件

JavaScript的DOM之鼠标悬浮事件

JS的DOM之鼠标悬浮事件 鼠标悬浮事件之onmouseover()和onmouseout()事件 这里用大白话介绍一下最简单的原理&#xff1a; 就是当鼠标在这块区域时候会触发相应事件&#xff0c;将鼠标挪开则恢复原先事件 附上代码 <!DOCTYPE html> <html lang"en"> <…
阅读更多...
如何调试JS中鼠标悬停事件影响的元素？

如何调试JS中鼠标悬停事件影响的元素？

如何调试JS中鼠标悬停事件影响的元素&#xff1f; 在日常的前端开发中&#xff0c;我们经常要调试许多其他开发者写的网站和代码。此时我们往往会打开浏览器的开发者工具&#xff0c;在 Elements,Console,Network,Sources,Performance 等多个 Tab 之间来回穿梭。 今天笔者来分…
阅读更多...
js实现鼠标悬停事件

js实现鼠标悬停事件

介绍&#xff1a;把鼠标放在选择框上实现文字浮现 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>第一个JS</title><style>#div1 {width: 100px;height: 100px;background-color: red;b…
阅读更多...
宜搭低代码与Faas构建数据看板

宜搭低代码与Faas构建数据看板

写在前面 数字化办公兴起&#xff0c;企业改变办公方式迫在眉睫&#xff0c;低代码是一个发展方向 目录 写在前面 环境及目的 表单&连接器&Faas 表单 连接器&Faas Faas 连接器配置 结语 环境及目的 平台&#xff1a;钉钉宜搭低代码 Faas:nodejs v12.20.0 …
阅读更多...
faas函数使用

faas函数使用

faas-cli 是一款 OpenFaaS 官方工具&#xff0c;在faas项目中使用频繁&#xff0c;作为与API GateWay沟通的桥梁工具&#xff0c;相当重要。它用于创建、部署OpenFaas函数应用 &#xff0c;支持从多种语言模板构建 (例如 Node.js, Python, CSharp and Ruby).&#xff0c;在实际…
阅读更多...
Nodejs也能Serverless？从0开始用Nodejs打造一个FaaS服务

Nodejs也能Serverless？从0开始用Nodejs打造一个FaaS服务

本篇文章并不是教你怎么用阿里云、谷歌云等等云框架的FaaS服务&#xff0c;而是教你如何从0开始打造一个自己的FaaS服务。 受限于人力及成本原因&#xff0c;现在的FaaS服务基本上可以说是“大厂玩物”&#xff0c;而网上鲜有相关代码的实现&#xff0c;因此我才打算写一篇文章…
阅读更多...
OpenFaaS介绍

OpenFaaS介绍

FaaS 云计算时代出现了大量XaaS形式的概念&#xff0c;从IaaS(Infrastructure as a Service)、PaaS(Platform as a Service)、SaaS(Software as a Service)到容器云引领的CaaS(Containers as a Service)&#xff0c;再到火热的微服务架构&#xff0c;它们都在试着将各种软、硬…
阅读更多...
深入理解无服务器架构(Faas/Serverless)

深入理解无服务器架构(Faas/Serverless)

摘要 无服务器架构(Faas/Serverless)&#xff0c;是软件架构领域的热门话题。 AWS&#xff0c;Google Cloud和Azure - 在无服务器上投入了大量资金&#xff0c;已经在看到了大量专门针对Faas/Serverless的文章、书籍&#xff0c;开源项目&#xff0c;会议。 但什么是无服务器&…
阅读更多...
PaaS、IaaS 、SaaS、Bass、Fass、无服务的理解与区别

PaaS、IaaS 、SaaS、Bass、Fass、无服务的理解与区别

云计算&#xff08;cloud computing&#xff09; 关于云计算的定义有多种说法&#xff0c;现阶段广为接受的是美国国家标准与技术研究院&#xff08;NIST&#xff09;定义&#xff1a;云计算是一种按使用量付费的模式&#xff0c;这种模式提供可用的、便捷的、按需的网络访问&…
阅读更多...
云计算服务类型都是什么？IaaS、PaaS、SaaS、BaaS、FaaS

云计算服务类型都是什么？IaaS、PaaS、SaaS、BaaS、FaaS

云计算服务类型都是什么&#xff1f;IaaS、PaaS、SaaS、BaaS、FaaS 基本概念 云计算主要分为 4 种类型&#xff1a;私有云、公共云、混合云和多云。 同时&#xff0c;云计算服务主要有 3 种&#xff1a;基础架构即服务&#xff08;IaaS&#xff09;、平台即服务&#xff08;P…
阅读更多...
简单介绍一下Serverless和Faas

简单介绍一下Serverless和Faas

一、啥叫Serverless(无服务器) Like many trends in software, there’s no one clear view of what Serverless is. For starters, it encompasses two different but overlapping areas: (就是一般定义为两种不同但交叉的领域&#xff1a;Faas和Baas) Serverless was first…
阅读更多...
Faas

Faas

文章介绍了Faas是什么&#xff0c;FaaS的特点、以及它的好处&#xff0c;和基于Kubernetes的FaaS框架Fission等&#xff0c;希望能对您有所帮助。 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈…
阅读更多...
XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS，Serverless和FaaS 概念

XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS，Serverless和FaaS 概念

XaaS IaaS、PaaS、SaaS CaaS&#xff0c;Serverless 和FaaS 和lambda 前言 云计算时代出现了大量XaaS形式的概念,从IaaS、PaaS、SaaS到容器云引领的CaaS,再到火热的微服务架构,以及现在越来越多被谈起的Serverless和FaaS,我们正在经历?一个技术飞速变革的时代。 一、什么是…
阅读更多...
IaaS, PaaS, SaaS, BaaS, Faas

IaaS, PaaS, SaaS, BaaS, Faas

aaS 是 As-a-Service 即为服务 的意思。 IaaS (Infrastructure as a Service) wikipedia&#xff1a;基础设施即服务 服务商提供底层/物理层基础设施资源&#xff08;服务器&#xff0c;数据中心&#xff0c;环境控制&#xff0c;电源&#xff0c;服务器机房&#xff09;&…
阅读更多...
云原生：什么是 FaaS ？

云原生：什么是 FaaS ？

概述 FaaS&#xff0c;Function as a Service&#xff0c;"功能即服务"&#xff08;也译作“函数即服务”&#xff09;&#xff0c;是一种在无状态容器中运行的事件驱动型计算执行模型&#xff0c;这些功能将利用服务来管理服务器端逻辑和状态。 它允许开发人员以功…
阅读更多...
【AI FaaS：NLaaS 自然语言即服务】设计一个自然语言生成 SQL 查询语句的 AI Faas API 系统

【AI FaaS：NLaaS 自然语言即服务】设计一个自然语言生成 SQL 查询语句的 AI Faas API 系统

设计一个AI Faas API 系统,支持自然语言生成SQL，并查询数据源数据返回表数据。同时，支持API开发完成即可线上使用。给我详细系统设计说明和完整的Golang代码，解释说明。5000字以上。 文章目录 【AI FaaS：NLaaS 自然语言即服务】设计一个自然语言生成 SQL 查询语句的 AI Faa…
阅读更多...
Serverless 是什么？BaaS 和 FaaS 是什么？

Serverless 是什么？BaaS 和 FaaS 是什么？

前言 本文隶属于专栏《大数据理论体系》&#xff0c;该专栏为笔者原创&#xff0c;引用请注明来源&#xff0c;不足和错误之处请在评论区帮忙指出&#xff0c;谢谢&#xff01; 本专栏目录结构和参考文献请见大数据理论体系 概览 Serverless 是一个云原生开发模型&#xff0c;…
阅读更多...
FatFs

FatFs

FatFs FatFS是一个为小型嵌入式系统设计的通用FAT(File Allocation Table)文件系统模块。FatFs 的编写遵循ANSI C&#xff0c;并且完全与磁盘I/O层分开。因此&#xff0c;它独立(不依赖)于硬件架构。它可以被嵌入到低成本的微控制器中&#xff0c;如AVR, 8051, PIC, ARM, Z80…
阅读更多...
推荐文章

Copyright @ 2022~2023