`
wj.geyuan
  • 浏览: 14817 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

table表随着鼠标移动背景变色(jQuery siblings())

阅读更多
jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。
实例1:
$(function(){
$("#table tr").mouseover(function(){
$(this).css("background-color", "#F4F4F4").siblings().css("background-color", "#FFFFFF");  
});
});


实例2:
html代码:
<div class="dd">
					<div class="dd-inner">
						<div class="item fore1 hover" data-index="1" >
							<h3><a target="_blank" href="www.baidu.com">建筑专业</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore2" data-index="2" >
							<h3><a target="_blank" href="www.baidu.com">结构专业</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore3" data-index="3" >
							<h3><a target="_blank" href="www.baidu.com">暖通空调专业</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore4" data-index="4" >
							<h3><a target="_blank" href="home.html">家居</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore5" data-index="5" >
							<h3><a target="_blank" href="1315-1342.html">男装</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore6" data-index="6" >
							<h3><a target="_blank" href="beauty.html">个护化妆</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore7" data-index="7" >
							<h3><a target="_blank" href="shoes.html">鞋靴</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore8" data-index="8" >
							<h3><a target="_blank" href="sports.html">运动户外</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore9" data-index="9" >
							<h3><a target="_blank" href="http://car.jd.com/">汽车</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore10" data-index="10" >
							<h3><a target="_blank" href="//baby.jd.com">母婴</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore11" data-index="11" >
							<h3><a target="_blank" href="food.html">食品</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore12" data-index="12" >
							<h3><a target="_blank" href="//health.jd.com">医药保健</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore13" data-index="13" >
							<h3><a target="_blank" href="//book.jd.com/">图书</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore14" data-index="14" >
							<h3><a target="_blank" href="//caipiao.jd.com/">彩票</a></h3>
					   		<i>&gt;</i> 
					   	</div>
						<div class="item fore15" data-index="15" >
							<h3><a target="_blank" href="//licai.jd.com/">理财</a></h3>
					   		<i>&gt;</i> 
					   	</div>
					</div>
				</div>

js代码
$(function(){
				$(".dd-inner .item").mouseover(function(){
					$(this).siblings().removeClass("hover");
			        $(this).addClass("hover");			        
				});
			});

分享到:
评论

相关推荐

    jquery 编辑table实例

    本教程将深入探讨如何使用 jQuery 实现表格(table)的编辑功能,包括“一行编辑”和“双击编辑单元格”两种常见实例。 **一、一行编辑** 1. **创建HTML结构**:首先,我们需要一个基本的HTML表格结构,包含表头...

    jquery实现表单变色

    《锋利的jquery》利用siblings(),attr()方法实现表单变色

    jquery鼠标悬停滑动下拉导航菜单效果.zip

    jQuery提供了多种方法,如`.children()`, `.siblings()`, `.parent()`等,帮助我们轻松找到相关的子元素或父元素。 在实现这个效果时,通常会有一个HTML结构,包含主菜单项和对应的下拉子菜单。CSS用于基本的样式...

    jQuery中的siblings用法实例分析

    在jQuery库中,`siblings()`方法是一个非常实用的选择器,用于获取匹配元素集合中每个元素的所有同级元素,但不包括自身。这个方法是基于DOM(文档对象模型)中的兄弟节点概念,允许开发者轻松地操作页面上的元素...

    jquery siblings获取同辈元素用法实例分析

    本文实例讲述了jquery siblings获取同辈元素用法。分享给大家供大家参考,具体如下: jquery siblings 用于获得匹配集合中每个元素的同胞。 语法: .siblings(selector) 注:可以通过后面的可选参数选择器(selector)...

    jQuery siblings()用法实例详解

    siblings()方法是jQuery提供的一个强大的DOM元素遍历方法,它能够帮助我们选取元素的同级兄弟元素。这个方法在处理有层级关系的元素时非常有用,比如在一个列表或者选项卡中动态地显示或隐藏内容。 ### jQuery ...

    jquery鼠标滑过闪光滑出标题.zip

    在“jquery鼠标滑过闪光滑出标题”这个项目中,我们看到的是一个基于jQuery实现的图片相册特效。下面将详细阐述这个特效背后涉及的jQuery知识点和技术。 首先,这个特效的核心在于利用jQuery的事件处理机制。当用户...

    jQuery中的siblings()是什么意思(推荐)

    jQuery siblings() 方法返回被选元素的所有同胞元素,并且可以使用可选参数来过滤对同胞元素的搜索。 实例演示:点击某个li标签后将其设置为红色,而其所有同胞元素去除红色样式。 1.创建Html元素 点击li元素设置...

    jquery hover鼠标悬停到图片上图片放大缩小显示标题文字...

    本话题主要关注如何利用jQuery实现一个功能:当鼠标悬停到图片上时,图片会放大或缩小,并且显示标题文字。 首先,我们需要理解`hover()`是jQuery提供的一个方便的函数,用于绑定两个或更多的函数到元素的鼠标悬停...

    有关jQuery中parent()和siblings()的小问题

    本文探讨了在使用jQuery的parent()和siblings()函数时遇到的一个问题,并通过实例解释了问题的原因和解决方案。parent()函数用于获取匹配元素集合中每个元素的直接父元素,而siblings()函数用于获取匹配元素集合中每...

    jquery背景切换导航特效.zip

    在本项目"jquery背景切换导航特效.zip"中,主要涉及的是使用jQuery库来实现一个动态的、背景切换的导航栏效果。这个效果通常用于提升网站的用户体验,通过视觉上的变化吸引用户注意力,使导航更加生动有趣。以下是这...

    基于jQuery实现预览图+简介的内容展示代码,鼠标放在图片上可以产生多种效果,例如:显示简介,图片移动等。

    在本文中,我们将深入探讨如何使用jQuery库来创建一个预览图和简介的内容展示系统,该系统会在鼠标悬停在图片上时触发多种效果,如显示简介、图片移动等。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、...

    jQuery中siblings()方法用法实例

    在jQuery库中,`siblings()`方法是一个非常有用的工具,它允许开发者选取当前匹配元素集合中的每个元素的所有同辈元素。这个方法在处理DOM结构时,尤其是进行元素筛选和操作时,具有很高的实用性。下面我们将详细...

    jquery表单变色

    《锋利的jquery》利用siblings(),attr()方法实现表单变色

    Jquery实现可编辑的表格

    在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作、事件处理和动画效果。本主题将深入探讨如何使用jQuery实现一个可编辑的表格功能,允许用户即时修改表格内的数据并保存更改。 首先,...

    jquery手册jquery的学习jquery的学习

    《jQuery手册:深入学习jQuery》 在Web开发领域,jQuery是一个不可或缺的JavaScript库,它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本篇文章将深入探讨jQuery的核心概念和实用技巧,帮助你全面掌握这...

    20个炫酷jquery程序

    6. **响应式设计**:随着移动设备的普及,响应式设计变得至关重要。jQuery可以辅助实现这一目标,例如通过`resize()`事件监听窗口大小变化,动态调整布局。 7. **过渡和效果**:`toggleClass()`, `addClass()`, `...

    jquery-3.1.1.js 、jquery-3.1.1.min.js 【jquery包 js】

    3. **选择器**:jQuery扩展了CSS选择器,使得选取元素更加方便,例如,`.children()`, `.siblings()`, `.parent()`, `.find()`等,以及更复杂的`:first`, `:last`, `:even`, `:odd`, `:contains()`等伪类选择器。...

Global site tag (gtag.js) - Google Analytics