<!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. ELK初步实践

    ELK是一个日志分析和统计框架,是Elasticsearch.Logstash和Kibana三个核心开源组件的首字母缩写,实践中还需要filebeat.redis配合完成日志的搜集. 组件一览 名称 ...

  2. androi 多线程

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  3. sublime text 配置 builder [build system]

    有时候需要用运行一段 PHP 代码,比如测试某个函数返回值等等,如果启动 Http Server,再打开浏览器,那黄花菜都凉了.我们可以在 Sublime Text 3 中创建 PHP 的 build ...

  4. 复旦大学2015--2016学年第一学期（15级）高等代数I期末考试第八大题解答

    八.(本题10分)  设 $V$ 为数域 $K$ 上的 $n$ 维线性空间, $\varphi$ 为 $V$ 上的线性变换. 子空间 $C(\varphi,\alpha)=L(\alpha,\varp ...

  5. python os模块(2)

    os模块主要用于:目录.文件(删除.判断.分割文件名和后缀) 目录 (1)获取当前目录(2)修改目录(3)生成目录(4)删除目录(5)查看目录下的内容(6)重命名目录(7)修改时间属性(8)链接目录( ...

  6. LINUX下编译源码时所需提前安装的常用依赖包列表

    yum -y install gcc gcc-c++ autoconf libjpeg libjpeg-devel libpng libpng-devel freetype freetype-deve ...

  7. TFS二次开发、C#知识点、SQL知识总结目录

    TFS二次开发系列 TFS二次开发系列:一.TFS体系结构和概念 TFS二次开发系列:二.TFS的安装 TFS二次开发系列:三.TFS二次开发的第一个实例 TFS二次开发系列:四.TFS二次开发Wor ...

  8. 16-腾讯-intership-面试

    问题 问:说一下在浏览器那里输入一个网址,会发生什么?答:DNS服务器解析,TCP三次握手,建立连接,然后bilibala............... 问:你对http相关协议熟悉吗?答:我问是ge ...

  9. Latex引用插图格式制定问题（1）

    自定义新命令\reffig如下:\newcommand{\reffig}[1]{Figure \ref{#1}}在需要引用图片的时候,用\reffig代替\ref,就可以自动在图号前面输出" ...

  10. Google C++ Style Guide

    Background C++ is one of the main development languages used by many of Google's open-source project ...