<!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" />

<title>无标题文档</title>

<script src="jquery-1.11.2.min.js"></script>

<style type="text/css">

.aa{ width:200px; height:200px; float:left; margin:5px; background-color:#3F6}

</style>

</head>

<body>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

<div class="aa">

</div>

</body>

<script type="text/javascript">

$(".aa").click(function(){

        //所有元素背景色变成原来的

        $(".aa").removeAttr("xz");

        $(".aa").css("background-color","#3F6");

        //找到点击了谁

        $(this).attr("xz","1");

        $(this).css("background-color","red");

    })

$(".aa").mousemove(function(){

        //所有元素背景色变成原来的

        $(".aa").css("background-color","#3F6");

        //找到点击了谁

        $(this).css("background-color","yellow");

        $("[xz='1']").css("background-color","red");

    })

</script>

</html>

Jquery做点击选中与鼠标移上特效的更多相关文章

  1. Vue 框架-02-事件：点击, 双击事件,鼠标移上事件

    Vue 框架-02-事件:点击, 双击事件,鼠标移上事件 1.单击事件:v-on:click 源码 app2.js : //实例化 vue 对象 new Vue({ //注意代码格式 //el:ele ...

  2. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

  3. DIV内容超出长度显示省略号，鼠标移上自动显示全部内容（EasyUI DataGrid）

    如果想把DIV中超出的文本显示成省略号,而不是换行全部显示,有2个办法. 注:本文主要是以EasyUI的DataGrid为案例的,如果是其他场景只要底层是用DIV显示文本的应该都能使用. 首先可以给此 ...

  4. 只要把鼠标移上Div方框，方框就自动顺时针旋转

    这是一个CSS3特效,IE下看不到效果.一个Div方框,在CSS3代码的作用下,只要把鼠标移上Div方框,方框就自动顺时针旋转.代码量不大,甚至有些简单,作为一个基础的CSS3实例,我想还是比较不错的 ...

  5. chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持，技巧：要在鼠标上的 div上 勾 :hover

    chrome DevTools 里面 css样式里面 勾上 :hover 会将鼠标移上的效果一直保持,技巧:要在鼠标上的 div上 勾 :hover

  6. jQuery实现鼠标移上弹出提示框，移出消失

    <TD>里有一行数据 "那片笑声让我想起......"  假设超出规定长度将用......代替, 而现在要通过鼠标移动到......上 显示全部内容,移出则消失.如下图 ...

  7. 点击图片或者鼠标放上hover .图片变大. 1)可以使用css中的transition, transform 2) 预先设置一个 弹出div. 3)弹出层 alert ; 4) 浏览器的宽度document.documentElement.clientWidth || document.body.clientWidth

    变大: 方法一: 利用css属性. 鼠标放上 hover放大几倍. .kecheng_02_cell_content img { /*width: 100px; height: 133px;*/ wi ...

  8. 在input中实现点点点与当鼠标移上去时显示剩余的字

    项目中经常会遇到这个问题,在一个内容框中,由于框的宽度是固定的,但是里面的内容却有很多,那么这个时候需求里就要求第一,多余的字要以点点点的形式隐藏,第二,当鼠标移上去的时候要以title提示的方式显示 ...

  9. jq点击和鼠标移上效果以及一个等号"=" 二个等号"==" 三个等号"===" 的区别

    <body> <div class="a" bs='1' style="width:100px; height:30px; border:1px sol ...

随机推荐

  1. hive相关

    HIVE JOIN:http://blog.csdn.net/yfkiss/article/details/8073608 HIVE资料: 一条记录map阶段输出KV,shuffle sort,输出K ...

  2. 使用PHP QR Code生成二维码

    使用PHP QR Code生成二维码   HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示demo,查看地址: http://phpqrcode.so ...

  3. dmidecode查看设备硬件信息

    在bash里输入:dmidecode -s system-product-name 或者lshw -class system 在Linux系统环境下(CentOS .4和Ubuntu .04已确认), ...

  4. python 最小公倍数

    最小公倍数 求解两个整数(不能是负数)的最小公倍数 方法一:穷举法 def LCM(m, n): if m*n == 0: return 0 if m > n: lcm = m else: lc ...

  5. 关于phpcms 万一忘记密码怎么破？

    莫慌~海洋小生教你~我也是偷偷学来的,呀哈哈哈! first:............................你就认命吧!哈哈哈... 开玩笑开玩笑! LOOK HERE ↓: 1.在没有安装 ...

  6. python非递归全排列

    刚刚开始学习python,按照廖雪峰的网站看的,当前看到了函数这一节.结合数组操作,写了个非递归的全排列生成.原理是插入法,也就是在一个有n个元素的已有排列中,后加入的元素,依次在前,中,后的每一个位 ...

  7. XML特殊符号

    在XML中"<" 字符和"&"字符是严格禁止使用的.要使用这几种字符需要使用它们的实体, 下面是五个在XML文档中预定义好的实体:< < ...

  8. 部署网站出现System.ServiceModel.Activation.HttpModule错误

    1. 部署网站到IIS7.5,Window 2008的时候出现这个错误 2. 错误信息 Server Error in '/' Application. Could not load type 'Sy ...

  9. VS中Qt的探索02

    边看C++ GUI QT4教程,边在VS2010中进行编程学习探索. 在使用Qt设计师时,其中每一个对象的ObjectName属性是非常重要的,在程序功能的实现过程中,需要不断的使用该变量名. 当所有 ...

  10. Rdseed与SAC的安装

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...