js实现鼠标经过及点击变换不同背景颜色效果

最新推荐文章于 2023-04-21 11:26:54 发布
原创 最新推荐文章于 2023-04-21 11:26:54 发布 · 4.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用HTML和JavaScript实现的下拉菜单交互效果。通过jQuery库增强网页元素的动态特性，当鼠标悬停在列表项上时改变其背景颜色，并在点击时保持选中状态。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script type="text/javascript">
  //实现下拉列表选择效果
  $(function(){
$(".pic ul li").each(function(i){
$(this).hover(function(){
$(this).addClass("pic1").siblings().removeClass("pic1");
})
$(this).click(function(){
$(this).addClass("pic11").siblings().removeClass("pic11");
})
})
})
 </script>
 <style type="text/css">
/*设置list鼠标移动经过样式*/
.pic1{background:#ccc;}
/*设置list鼠标点击样式*/
.pic11{background:#66FFCC}
 </style>
 </head>


 <body>
  <div class="pic">
 <ul>
 <li>全部</li>
 <li>流量分析</li>
                      <li>IP地址</li>
                      <li>木马分析</li>
 <li>暗流量分析</li>
 </ul>
</div> 
 </body>
</html>
JavaScript+css+html鼠标指针经过某些元素时背景变色
橘猫吃不胖的博客
11-26 6850
鼠标指针经过某些元素时背景变色1 案例1说明1.1 编写HTML结构体代码1.2 编写CSS样式1.3 编写js代码2 案例2说明 1 案例1说明 【案例】以表格为例，使用JavaScript+css+html，设置鼠标指针经过某行时，该行变色。 【案例分析】当表格中的单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景色，使表格内容显得清晰和一目了然，容易阅读。 本案例使用排他思想来分析，并且使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现案例效果。 1.1 编写H
JavaScript实现鼠标滑过图片变换效果的方法
10-24
在本文中，我们将详细介绍如何使用JavaScript实现鼠标滑过图片时的变换效果，这涉及对鼠标事件的控制以及CSS样式的动态变化。 首先，我们需要了解HTML中如何设置图片，并通过JavaScript为图片添加鼠标滑过事件。...
js鼠标经过变化底色
m0_46069861的博客
07-24 391
<!DOCTYPE html> <html> <head> <style> table{ width: 800px; margin: 100px auto; border-collapse: collapse; font-size: 14px; text-align: center; }
用JavaScript实现鼠标经过一行变色的功能
weixin_30314793的博客
10-24 678
有些时候鼠标移动到一些地方，该地方会相应的做出一些变化。我们在CSS中可以使用hover来实现鼠标事件，但这仅限于鼠标移动到此元素上，元素做出的相应反应。与CSS不同的是，JavaScript为我们提供了一系列的鼠标监听事件。此案例将模拟鼠标经过表格一行时的变色功能。 代码如下 <!DOCTYPE html> <html> <head> <me...
javaScript点击鼠标改变背景颜色
heikerx的博客
08-16 3655
<script> function rgbToHex(r, g, b) { return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1); } document.addEventListener('click',function(e){ //console.log(e.clientX); //console.log(e.clientY); c
【案例】鼠标指针经过时背景变色
2301_76909975的博客
04-21 623
上述代码中，第三行代码把获取到的tbody里面所有的行保存在变量trs中。第五行代码利用for循环来为trs中的每一个元素绑定事件。第7~9行代码为trs中的每一个元素绑定onmouseover鼠标指针经过事件，当鼠标指针进入的时候给当前tr项的类名设置为bg。第11~13行代码给trs[i]绑定onmouseout鼠标指针进入的时候给当前tr项的类名设置为空 ，去掉当前的背景颜色。当表格中单元格比较多时，可以在用户鼠标指针经过时把当前行添加背景颜色，使表格内容显得清晰和一目了然，更容易阅读。
响应鼠标变换表格背景或者颜色的代码
09-06
其次，让我们来看一下使用JavaScript变换背景颜色的代码： ;" onMouseOver="this.bgColor='#E0E0E0';"> 在上面的代码中，我们使用了 HTML 的 tr 元素，并为其添加了 onMouseOver 和 onMouseOut 事件处理函数。当...
jQuery实现鼠标滑过Div层背景变颜色的方法
10-24
这个类在鼠标滑入时被添加到`div`元素上，鼠标滑出时被移除，从而实现背景颜色的变换效果。 接下来是关键的jQuery脚本部分。在这个脚本中，`$(function(){...})`是一个简写的DOM Ready事件，它确保了jQuery脚本在...
精选资源
JS实现鼠标经过背景自动变色特效代码
03-20
在JavaScript编程中，实现鼠标经过元素时背景颜色自动变化的特效是一种常见的交互设计。这个特效可以增加用户与网页的互动性，使用户更容易注意到特定的元素。以下将详细讲解如何利用JavaScript来实现这一功能。 ...
javascript实现鼠标放上后下边对应内容变换的效果
10-23
该文件讨论了如何使用JavaScript实现一个常见的Web界面效果，即鼠标悬停在某个元素上时，下面对应的内容会发生变化。这种效果常用于制作菜单切换、标签切换等场景。以下是对此主题的详细阐述： ### JavaScript实现...
鼠标指针经过时背景变色
qq_64182180的博客
11-17 3427
跟着pink老师学js，这里是教我们如何使用鼠标指针经过事件onmouseover和鼠标指针离开事件onmouseout实现。
通过js实现切换背景颜色
vicky000001的博客
04-18 4136
【代码】通过js实现切换背景颜色。
javascript鼠标经过背景色和字体颜色改变
男儿当自强
09-21 1万+
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here function over(obj){ obj.style.backgroundColor="blue"; obj.style.color="white"; } fun
js实现鼠标移动到div背景颜色变换，移开还原
热门推荐
weixin_42630877的博客
10-16 1万+
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js重温&lt;/title&gt; &lt;/head&gt; &lt;div id="sss" onmouseover = "over
核心项目：MyRPC——基于Java语言实现的RPC框架
燕双嘤
09-05 8479
RPC：Remote Procedure Call，即远程过程调用。远程过程调用是一种像调用本地过程一样调用远程机器上的过程，而不需要了解网络细节的远程过程访问支持机制。 由于基于套接字的开发方式，因此带来了开发繁琐和排错困难的问题。
JavaScript鼠标移入移出时颜色变化代码
dusea的博客
08-31 9409
判断鼠标在网页的某个区域移动 转自http://jingyan.baidu.com/article/ac6a9a5e5c040b2b653eac25.html，这里面还有些其他有用的操作 鼠标移入移出时颜色变化代码 <input type="submit" value="把鼠标移动这里" name="btn1" onMouseOut=this.style.color="blue" o
用js实现鼠标移出移进变换颜色
feilong_12的专栏
02-28 1万+
function a(){ var red=document.getElementById('div1'); red.style.backgroundColor="blue"; } function b(){ var red=document.getElementById('div1'); red.style.backgroundColor="red"; }
编写js+css+html实现鼠标指针经过某一行时，实现该行背景颜色变色
hey，欢迎浏览我的博客，希望能给你提供帮助。
12-21 1936
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { wid
js设置鼠标悬停改变背景色
weixin_30646315的博客
12-23 1301
看了网上那么多的js鼠标悬停时事件，大多数的，说了那么多话，也没解决什么问题，现在直接贴上代码，以供参考 html: <div id="sign">this is test!</div> css:　　　　　　 <style type="text/css"> .out{background-color: gray;} .over{bac...
实现鼠标变换时表格背景或颜色的特效代码
资源摘要信息:"响应鼠标变换表格背景或者颜色特效代码" 知识点： 1. 鼠标变换表格背景或颜色特效的概念： 在网页开发中，常常需要对用户交互做出响应，以提高用户体验。鼠标悬停（hover）变换表格背景或颜色是一种...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值