jQuery 鼠标移入移出事件切换

最新推荐文章于 2024-09-21 17:47:05 发布
最新推荐文章于 2024-09-21 17:47:05 发布
阅读量6.3w 收藏 15
点赞数 7
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuair/article/details/70160193
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		<title></title>
		<script>
			$(function(){
				$(msg).on({
					mouseover : function(){
						$(this).wrap("<h1>") ;
					} ,
					mouseout : function(){
						$(this).unwrap() ;
					} 
				}) ;
			}) ;  
		</script>
	</head>
	<body> 
		<p id="msg">Hello World !!!</p>
	</body>
</html>

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
		<link rel="stylesheet" href="css/style.css" />
		<title></title>
		<script>
			$(function(){
				$(msg).hover(
					function(){
						$(this).wrap("<h1>") ;
					} ,
					function(){
						$(this).unwrap() ;
					} 
				) ;
			}) ;  
		</script>
	</head>
	<body> 
		<p id="msg">Hello World !!!</p>
	</body>
</html>

 

shuair
关注
JQuery实现鼠标移入移出效果
WfTest的博客
09-19 768
在网页开发中，经常需要为元素添加交互效果，其中之一就是鼠标移入移出效果。当你将鼠标移动到带有ID为"my-element"的元素上时，你将看到其背景颜色变为红色，当你将鼠标移出元素时，背景颜色将变为蓝色。通过使用jQuery，我们可以轻松地为网页元素添加交互效果，提升用户体验。在上述代码中，当鼠标移入元素时，我们将背景颜色设置为红色，当鼠标移出元素时，我们将背景颜色设置为蓝色。接下来，我们创建一个HTML元素，并为其添加一个唯一的ID，以便我们可以通过jQuery选择器选中该元素。例如，我们可以创建一个。
jQuery实现鼠标移入移出事件切换功能示例
10-18
主要介绍了jQuery实现鼠标移入移出事件切换功能,结合实例形式分析了jQuery不同版本处理鼠标事件响应与触发相关操作技巧,需要的朋友可以参考下
鼠标移入，移除等在div中触发事件遇到问题
小二丶的博客
04-29 1998
js、jq 中 鼠标移入，移除等在div中触发事件 还有一些案例 可进行参考
jQuery事件和特效
最新发布
nice66660的博客
09-21 892
toggle( fn1,fn2…)实现单击事件的切换，无须额外绑定click事件toggle( )实现事件触发对象在显示和隐藏状态之间切换toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切。
jquery事件切换(鼠标移入移出,鼠标点击切换)
qq_44063001的博客
02-25 2516
jquery鼠标移入移出事件 hover(function(){},function(){}) &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&amp;gt; &amp;lt;sc
js的鼠标移入移出事件
FENGZXCjjjjj的博客
04-07 936
这篇博客给大家讲解一下js事件，鼠标移入移出，这两事件的用途十分广泛，是通过鼠标来实现具体操作的。这两个事件还可以同时绑给当个div,通过鼠标指针，所处范围来判断，是否在元素内，还是元素外。上图是具体写法，当然我们还可以添加更复杂的操作，大家快去实践起来吧。移入： onmouseenter（）移出：onmouseleave（）
JS鼠标移入移出事件
m0_45195035的博客
06-12 9354
鼠标移入后 文字添加下划线，字体变色，背景颜色改变。移出后恢复原样。 <html> <head></head> <script> function come() { document.getElementById("text").style.color="#00ff00"; document.getElementById...
demo---鼠标移入移出效果（jQuery）
DcTbnk的博客
06-16 377
html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8" /> <title>判断鼠标移入移出方向</title> <style type="text/css"> * { margin: 0; padding: 0; } .outer { .
jQuery鼠标移动事件
柯晓楠
01-16 7162
概念 个人理解： jQuery鼠标移动事件是最常用的鼠标事件之一，当用户使用鼠标在指定的元素上移动时即与该元素产生交互，就会触发鼠标移动事件，比如：鼠标在指定元素上移入、移出、悬停等等操作，都属于鼠标移动事件的范围。 mouseenter()&mouseleave() 事件函数 说明： 当鼠标指针穿过（进入）被选元素时，会发生 mouseenter 事件。mouseenter() ...
html设置鼠标移入移出样式,鼠标移入移出_CSS3实现鼠标移入移出时改变样式的效果...
weixin_32667955的博客
06-04 3734
摘要 腾兴网为您分享:CSS3实现鼠标移入移出时改变样式的效果，壹学车，小猿口算，网易uu，万步有约等软件知识，以及山西个税，自动伴奏软件，成都农商银行app，儿歌千千，抖音群控系统，qq领赞，2017英语全国卷1,卓大师，康易，迎中秋庆国庆手抄报，公租房系统，万享，东台人，点云处理软件，影楼照片处理软件等软件it资讯，欢迎关注腾兴网。移入移出有效果我们通常会使用js或jquery来实现了，但是现...
js 实现 鼠标移入移出时颜色变化
03-31
js 实现 鼠标移入移出时颜色变化! 值得下载看看!资源免费,大家分享!!
jQuery鼠标移入抖动变形特效
06-24
在本文中，我们将深入探讨如何使用jQuery和HTML5 Canvas实现一款独特的鼠标移入抖动变形特效。这个特效在用户将鼠标悬停在HTML元素上时，可以为元素的边框创造出波浪般的抖动视觉效果，增加了交互性与趣味性。 首先...
JavaScript——鼠标移入移出事件
小五
01-03 2017
onmouseenter / onmouseleave 和 onmouseover / onmouseout的关系 onmouseenter 类似 mouseover，它们两者之间的差别是 mouseenter 不会冒泡（bubble） 对于深层次结构，发送的mouseenter事件数量可能非常大并且会导致严重的性能问题。在这种情况下，最好是监听鼠标悬停事件。（可使用chrome开发者工具选项...
鼠标移入移出事件
m0_59162228的博客
10-18 1029
hellow大家好，今天给大家带来的是鼠标移入移出事件。鼠标移入（onmouseover）、鼠标移出（onmouseout）。 先写一个div并写好样式以及在div内写onmouseover和onmouseout 最后在javascript里写上onmouseov和onmouseout的函数 最后实现的页面就是这样 ...
jQuery移入移出事件
嘤嘤鸭的博客
04-15 353
jQuery移入移出事件 mouseover和mouseout 以下程序一个父div中有一个子div，移入父div打印“father移入”，移出父div打印“father移出” <script> $(function() { //mouseover $(".father").on("mouseover",function() ...
jQuery 事件 - mousemove() 和 mouseout() 方法(移入,移出事件)
lyg1153的博客
02-12 5848
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"/&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/j
用js 实现鼠标移动，移入，移出事件
weixin_71439860的博客
08-08 8339
用js 实现鼠标移动，移入，移出事件
jQuery事件-div的显示隐藏及鼠标的移入移出
06-11
好的，我可以帮你解答这个问题。要实现div的显示隐藏及鼠标的移入移出，可以使用jQuery的事件绑定和操作DOM元素的方法。以下是一个简单的示例代码： HTML代码： ``` <div id="myDiv">这是一个div</div> ``` CSS代码： ``` #myDiv { display: none; width: 200px; height: 200px; background-color: gray; } ``` jQuery代码： ``` $(document).ready(function() { // 鼠标移入事件 $('#myDiv').mouseenter(function() { $(this).css('background-color', 'red'); }); // 鼠标移出事件 $('#myDiv').mouseleave(function() { $(this).css('background-color', 'gray'); }); // 按钮点击事件 $('#myBtn').click(function() { // 切换div的显示和隐藏 $('#myDiv').toggle(); }); }); ``` 解释一下这段代码的逻辑： 1. 鼠标移入事件：当鼠标移入div元素时，将其背景色改为红色。 2. 鼠标移出事件：当鼠标移出div元素时，将其背景色改为灰色。 3. 按钮点击事件：当按钮被点击时，切换div元素的显示和隐藏状态。 其中，`mouseenter`、`mouseleave`和`click`都是jQuery的事件绑定方法，`toggle`是操作DOM元素的方法，用于切换元素的显示和隐藏状态。 希望这个示例能够帮到你，如果还有其他问题，请随时提出。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值