JS给元素添加自定义hover函数

最新推荐文章于 2023-07-17 10:46:51 发布
最新推荐文章于 2023-07-17 10:46:51 发布
阅读量5.1k 收藏 3
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/y_bccl27/article/details/101608316
版权 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" charset="utf-8">
	<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<title>无标题文档</title>
	<script type="text/javascript">
	$(document).ready(function(){
  		$("#demo1").hover(function(){
	 		$("#demo1").css("top","20px");
			$("#demo1").css("left","20px");
			
	  	},function(){
			$("#demo1").css("top","0px");
		    $("#demo1").css("left","0px");

		});
  	});
</script>
</head>
<body>
 <div>
 	<div style="position: relative; width:240px; height:240px; border:1px solid #CCC; padding:20px;" id="demo1">
 		<div  style="width:200px; height:200px; background-color:#096;" >
    		111
    	</div>
    </div>
 	<div style="width:200px; height:200px; background-color:#096;" id="demo2">
    	222
    </div>
 </div>
</body>
</html>

 

y_bccl27
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS实现css hover操作的方法示例
10-20
主要介绍了JS实现css hover操作的方法,涉及javascript事件响应及页面元素css属性动态操作相关技巧,需要的朋友可以参考下
用 jquery 或原生 js 添加 hover 属性
君非道的博客
10-18 5586
用 jquery 给 dom 元素添加 hover // html 代码 <div class="test">请把鼠标放在上面</div> /* * js 代码 * hover 函数接收两个参数，这两个参数也是函数 * 第一个参数是鼠标悬浮时触发，第二个参数是鼠标离开时触发 */ $('.test').hover(function() { // 鼠标悬浮时触发 $('.test').css('color', 'blue') }, function() { // 鼠标离开时触发
jQuery 通过hover 调用函数方法
Sleeping_Fairy的博客
05-17 516
hover（）函数的用法 hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。 实例一 当鼠标指针悬停在上面时，改变p元素的背景颜色： $(“p”).hover(function(){ // 鼠标悬停时颜色设置 $(“p”).css(“background-color”,“yellow”); },function(){ $(“p”).css(“background-color”,“pink”); // 鼠标离开时颜色设置 }); 实例二 当鼠标指针悬停在svg图形g标签上面时，调用自定义
触碰div触发事件，使用hover函数（有局限性），mouseenter和mouseleave使用更广
qq_41353397的博客
09-05 928
$(‘body’).on(‘mouseenter’,’.divClass’,function(event){ //TODO }).on(‘mouseleave’,’.divClass’,function(event){ //TODO }); //不生效(动态添加的html不生效) $(".divClass").hover(function(){ //TODO },function(){ //TODO });
css 对div用hover设置border，出现抖动和div走位问题，解决方法
qq_38932936的博客
08-02 1万+
样式设置 ： div:hover { border:1px solid red;} 当鼠标移动到div时，产生抖动和偏移。 产生的原因： 是因为设置border时设置了1px边框，多出的这1px，与其它元素产生了挤压， 导致div偏移。 解决方法： 第一种方法：是先将这个div设置一个跟背景颜色一样的边框，比如背景颜色为#aaa；那么你先设置这个d...
js模拟windows系统自定义多级右键菜单
06-05
1. **事件监听**：在HTML元素上添加`contextmenu`事件监听器，当用户在该元素上执行右键点击时，触发自定义的右键菜单逻辑。例如： ```javascript document.getElementById('targetElement').addEventListener('...
【JavaScript源代码】vue添加自定义右键菜单的完整实例.docx
12-29
在JavaScript中，右键菜单通常是通过原生浏览器事件来实现的，而在Vue中，我们可以通过监听原生事件或使用第三方插件来创建自定义的右键菜单。以下是使用Vue实现自定义右键菜单的详细步骤： 1. **事件监听**： 在...
javascript解决IE6下hover问题的方法
12-12
2. 使用JavaScript遍历目标元素，并为每个元素添加`onmouseover`和`onmouseout`事件处理程序。 3. 在`onmouseover`事件中，添加自定义类到元素的`className`，以应用CSS样式。 4. 在`onmouseout`事件中，移除自定义...
jQuery自定义添加删除表单代码.zip
07-05
在JavaScript中，按钮通常与`<input type="button">`或`<button>`元素关联，可以通过`click()`函数监听按钮的点击事件。当用户触发这些事件时，会执行预设的函数，比如添加新的表单行或删除已有的。这里可能会使用`...
other-hover:将鼠标悬停在其他元素上时切换 DOM 元素上的类
05-31
`other-hover.js`是一个轻量级、易于集成的JavaScript库，专门用于处理当用户将鼠标悬停在页面上的一个元素时，改变其他元素的样式或状态。这个库特别适用于那些需要动态响应用户行为的设计场景，如导航菜单、工具...
CSS实现hover效果
Yungoal的博客
07-17 2410
在css中实现悬浮盒子效果
js 关于如何动态设置css的hover样式最佳方式，设置hover样式
PrimaryColor
11-16 5463
网上很多方式都是采用js监听dom的鼠标移入（onmouseover）移出（onmouseout）事件，进行控制这个dom的hover样式。消耗性能先不说，代码也很庞大，再加上如果是自定义主题（修改后能立马看到效果的，不是需要刷新）的功能可能就更麻烦了，要给所有的dom都绑定这样的事件。
前台JS：通过Hover（鼠标悬停事件）动态悬浮显示DIV的ID
.NET开发工程师吃瓜日常的日常
01-16 3万+
HTML代码：定义两个DIV并设置大小宽度 &lt;div id="Div1" class="div-list" style="width:20px; height:50px; border:1px solid #F00"&gt; &lt;a&gt;DIV1&lt;/a&gt; &lt;/div&gt; &lt;div id="
js动态添加hover事件
welcome to my blog!
10-22 2万+
通常前端css鼠标滑过，离开的事件加在css,scss,less中，但是比较复杂的情景，比如鼠标滑入触发多个事件亦或者其它元素的样式变化，如阴影，遮罩层，边框等等。这个时候JS控制hover事件是最好的选择，下面插入一段自己经常用到的特效，仅供参考。 直接上代码。 <!DOCTYPE html> <html lang="en"> <hea...
JS实现css的hover效果，兼容移动端
砷碲 - Shendi
03-07 5718
CSS的hover即触碰时触发，在电脑端鼠标触碰，移动端手指触摸有的时候光靠css实现不了一些效果，例如元素触发hover，其他元素触发动画效果，所以需要使用到js。
js hover 触发事件_JQ基础（5）事件的传播
weixin_39658759的博客
11-23 3896
在说明基于通常不可单击的页面元素处理单击事件的能力时，我们构思的界面中已经给出了一些提示——样式表切换器标签（即元素）实际上都是活动的，随时等待用户操作。为了改进界面，我们可以为按钮添加一种翻转状态，以便清楚地表明它们能与鼠标进行某种方式的交互： .hover { cursor: pointer; background-color: #afa; } CSS规范加入了一个名叫:ho...
JavaScript如何设置hover属性?
热门推荐
Potry Code的博客
08-03 3万+
hover就是选择鼠标指针浮动在其上的元素，并可以设置其样式的。 但是在DOM操作中，我们并不可以直接设置hover属性。而要想有这个效果我们可以直接给元素注册一个onmouseover（鼠标进入）和onmouseout（鼠标离开）事件，然后在事件处理函数中改变标签的样式，这样就可以有hover属性了。 例如： <body> <ul> <li>雪花&lt...
js实现hover样式，适用于只需要为单个元素添加少量样式的情况
郑伟斌的博客
08-26 3484
1.简介 在网页开发中一个元素的鼠标悬停样式常常由伪类:hover来控制，而当我们用js生成一个DOM元素时想要给它添加hover样式的话就显得比较麻烦，常规方法是先给它添加一个类名，然后往页面中新增一个style便签，标签内定义伪类hover的样式。 2.代码实现 这里采用mousenter和mouseleave的监听来实现hover样式。代码如下: var dc = { //设置元素的hov...
为元素添加hover的事件代理
AmberQu的博客
03-27 2102
$(selector).on(event,childSelector,data,function,map) 在传递到里面的参数中，只可以传一个function切换class名称模拟// js $('ul.course_lists').on('mouseenter mouseleave','li',function(){ $(this).toogleClass('border_colo...
echarts柱状图 hover自定义tips
最新发布
08-12
对于 ECharts 柱状图的 hover 自定义 tips，你可以通过使用 ECharts 的 tooltip 配置项来实现。下面是一个简单的示例： ```javascript // 导入 ECharts import * as echarts from 'echarts'; // 初始化图表容器 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值