Highlight On Mouseover Effect With JQuery
How to get the xpath by clicking an html element
How to get the xpath by clicking an html element
Quick Tip: Outline Elements on Hover
Quick Tip: Outline Elements on Hover
Highlight On Mouseover Effect With JQuery
Highlight On Mouseover Effect With JQuery I have seen this effect been used a lot on e-commerce sites or sites with lists in general. I don’t know how they do it exactly but I can show you how I would do it with JQuery. Take a look at the CSS class I made, what it does is it has a gold background color and round corners for Firefox, Safari and Chrome. .highlight-yellow { background-color:#FFD700; -moz-border-radius: 5px; -webkit-border-radius: 5px; } Let’s make the divisions we will highlighting.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augueLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augueLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac lectus sem, at placerat tortor. Duis a justo non arcu interdum posuere. Suspendisse id lacinia felis. Cras pharetra, enim eu vestibulum imperdiet, dui ligula pretium est, eu blandit risus turpis gravida augueAll I need now is to make a script that adds the CSS class we just made to the divisions when the mouse is on it, when the mouse moves out of the division I will remove the class. $(document).ready(function(){ $(".product").mouseover(function(){ $(this).addClass("highlight-yellow"); }); $(".product").mouseout(function(){ $(this).removeClass("highlight-yellow"); }); }); I don’t think I’ve told you about $(this) in any of my previous tutorials, in short, all $(this) does is refer to the current element on which the event (mouseout or mouseover) is been performed. As always, happy JQuerying!
Highlight On Mouseover Effect With JQuery的更多相关文章
- jquery-plugin-biggerLink,highLight-层加亮_andy 阳光生活_百度空间
How to get the xpath by clicking an html element How to get the xpath by clicking an html element Qu ...
- jQuery语法介绍
来自:http://www.cnblogs.com/ccorz/p/5803353.html jQuery类似于Python中模块的概念,是集成了javaScript和Dom的模块.大致分为两种版本1 ...
- jQuery/CSS3实现图片层叠展开特效
这是一款基于jQuery和CSS3的图片层叠展开特效,让鼠标滑过图片时即可触发这些特效.其中有一款就像扇子展开收拢一样,看起来效果都非常不错.当然本文主要还是来分析一下用jQuery实现这一效果的方法 ...
- html+css+jQuery+JavaScript实现tab自动切换功能
tab1.html内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> & ...
- css与jquery、图标字体
*)还能这样选择 header #search input[type="text"] *)按钮常用颜色:#008cBA(字母大小写没有区别) *)清除浮动后,text-align没 ...
- jQuery中的工具和插件
jQuery的工具属性 jQuery类数组操作 length属性 表示获取类数组中元素的个数 get()方法 表示获取类数组中单个元素"括号中填写该元素的索引值" index()方 ...
- jQuery链式操作[转]
用过jQuery的朋友都知道他强大的链式操作,方便,简洁,易于理解,如下 $("has_children").click(function(){ $(this).addClass( ...
- 值得 Web 开发人员学习的20个 jQuery 实例教程
这篇文章挑选了20个优秀的 jQuery 实例教程,这些 jQuery 教程将帮助你把你的网站提升到一个更高的水平.其中,既有网站中常用功能的的解决方案,也有极具吸引力的亮点功能的实现方法,相信通过对 ...
- JavaScript text highlighting JQuery plugin
介绍一个JQuery的插件,用来在页面上高亮显示匹配到的字符串. Demo 点击下面的两个链接以查看效果: highlight javascript 点击Remove highlights移除高亮显示 ...
随机推荐
- 关于 MyBatis MyBatis-Spring Jdbc 批量插入的各种比较分析
因为目前SME项目中编写了一套蜘蛛爬虫程序,所以导致插入数据库的数据量剧增.就项目中使用到的3种DB插入方式进行了一个Demo分析: 具体代码如下: 1: MyBatis 开启Batch方式,最普通的 ...
- Android Studio git ignore
# Built application files *.apk *.ap_ # Files for the Dalvik VM *.dex # Java class files *.class # G ...
- AJAX JQuery 调用后台方法返回值(不刷新页面)
AJAX JQuery 调用后台方法返回值(不刷新页面) (1)无参数返回值(本人亲试返回结果不是预期结果) javascript方法: $(function () { //无 ...
- vb socket的使用
说明:原本在 csdn 博客 写博客的,因为使用的移动宽带,csdn的 博客无法访问,所以先暂时到博客园写博客了 有能解决移动宽带 有部分网站不能访问的问题,请联系我,QQ 809775607 /** ...
- SQL Server 表压缩
表压缩有三个选项 1.page 2.row 3.none ----------------------------------------------------------------------- ...
- android ndk jni 环境搭建
关于ndk jni网上的介绍很多,其实我了解这个主要是因为自己是做嵌入式的,一则是对C语音有感情 二则是知道jni 可以绕过framework 框架直接操作硬件抽象层. 1.概述 对于ndk, j ...
- NOI2011 Day2
NOI2011 Day2 道路修建 题目描述:给出一棵树,求每条边的两边的端点数的差乘边权之和. solution: 题目可能描述得不太清楚,如图: 对于虚边,如果边权为10,两边的端点数之差为2,这 ...
- 字符串匹配——KMP算法
关于KMP算法的分析,我觉得这两篇博客写的不错: http://www.ruanyifeng.com/blog/2013/05/Knuth–Morris–Pratt_algorithm.html ht ...
- 自定义标签体、MVC
自定义标签 文件以tld结尾,放在webinfo中 标签名 引用类 标签体 继承SimpleTagSupport,复写doTag() getContext(); getjspBody() invo ...
- struts2中从数据库中读取数据,并在JSP页面中遍历保存有JavaBean对象的List对象
0x1:前言 前面搭建struts就不说了,大家都能成功完毕. 0x2:Model 这里我们须要一个Model类来接收 <span style="font-size:10px;font ...