<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
    .left div,
    .right div {
        width: 350px;
        height: 150px;
        padding: 5px;
        margin: 5px;
        border: 1px solid #ccc;
    }
   
    p {
        height: 50px;
        border:1px solid red;
        margin: 30px;
        text-align:center;
      font-size:30px;
      font-style:italic;
      font-weight:bold;
    }
      .p2{display:none}
    .left div {
        background: #bbffaa;
    }
   
    </style>
    <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
</head>

<body>
    <h2>.hover()方法</h2>
    <div class="left">
        <div class="aaron1">
            <p class="p1">hello</p>
            <p class="p2">2</p>
        </div>
    </div>
    <script type="text/javascript">
    $(".p1").hover(
        function() {
            $(this).css("background", 'red');
            $(this).animate({opacity:0},3000)
        
        },
        function() {
            $(this).css("background", 'yellow');
             $(this).animate({opacity:1},3000)
        }
    );
     $(".aaron1").hover(
        function() {
            $(this).css("background", '#00ffff');
        },
        function() {
            $(this).css("background", '#ccffcc');
        }
    );
     $("p").mouseout(function(){$(".aaron1").css("background","#ffccff")})
      $("p").mouseover(function(){$(".aaron1").css("background","#33ccff")})

</script>
</body>

</html>

jquery鼠标移入移出事件的更多相关文章

  1. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

  2. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  3. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  4. Qt 为QPushButton、QLabel添加鼠标移入移出事件

    QT 为QPushButton.QLabel添加鼠标移入移出事件**要实现的效果:**鼠标移入QPushButton时与移出时按钮变换字体颜色,鼠标移入QLabel时显示上面的文字,移出时不显示.** ...

  5. jQuery鼠标移入移出(冒泡版和无冒泡版)

    带冒泡事件的鼠标移入移出(默认的):mouseover和mouseout事件 没有冒泡事件的鼠标移入移出:mouseenter和mouseleave事件

  6. Javascript和jquery事件-鼠标移入移出事件

    javascript使用mouseover和mouseout,只在css中支持hover jquery支持mouseover和mouseout,封装了mouseenter.mouseleave事件函数 ...

  7. JS添加、设置属性以及鼠标移入移出事件

    源代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  8. jquery的鼠标移入移出事件hover、mouseenter、mouseleave、mouseover、mouseout

    hover:鼠标进入元素的子元素时不会触发‘鼠标移开’的事件: mouseenter.mouseleave:效果与hover相同: mouseover: 鼠标进入元素和进入它的子元素时都会触发‘mou ...

  9. 用JQuery给图片添加鼠标移入移出事件

    $("#addLineImg").mouseover( function(){ $("#addLineImg").attr("src",&q ...

随机推荐

  1. c语言常见编译问题

    1 . warn.c:6:2: warning: implicit declaration of function 'strcpy' [-Wimplicit-function-declaration] ...

  2. 数据流分析软件SQLFlow的高阶模式Job任务介绍

    SQLFlow是一个可视化的在线处理SQL对象依赖关系的工具,只需要上传你的SQL脚本,它可以自动分析SQL里的数据对象,包括database.schema.table.view.column.pro ...

  3. jQuery两种方法添加数据表格到HTML

    jQ创建表格的两种方法 1.模板字符串法   $(function () {           //模板字符串的方式添加到页面           $('#btn').click(function ...

  4. Linux_磁盘管理理论概述

    一.磁盘阵列 1.什么是磁盘阵列? 1️⃣:磁盘整列就是将多块独立的磁盘组合到一起,形成容量大的磁盘组. 2️⃣:将相同的数据存放到不多个的磁盘的不同位置 2.RAID0 1️⃣:RAID0是磁盘整列 ...

  5. cent 7 识别exfat

    cent 7 识别exfat install fuse-exfat exfat-utils

  6. Git-【技术干货】工作中Git的使用实践

    Git-[技术干货]工作中Git的使用实践 置顶 2019-09-17 21:02:16 web洋仔 阅读数 11444更多 分类专栏: Git   版权声明:本文为博主原创文章,遵循CC 4.0 B ...

  7. Docker——基本使用及常用命令

    Docker 是一个开源的应用容器引擎,而一个容器其实是一个虚拟化的独立的环境,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的 Linux 机器上,也可以实现虚拟化. ...

  8. Linux进阶之综合练习

    综合练习: 1.准备2台centos7系统的服务器,远程互相免密登录,以下所有题目过程中开启防火墙 2.给1号机和2号机使用光盘搭建本地yum源(永久生效) 3.给服务器1添加2块硬盘,1块1GB,1 ...

  9. Java基础语法，常用知识复习

    1.开发环境搭建 1.1JDK.JRE.JVM.的关系 JDK = JRE + 开发工具集(例如javac编译工具集等) JRE = JVM + Java SE 标准类库 2.基本语法 2.1.jav ...

  10. object_pool对象池

    object_pool对象池 object_pool是用于类实例(对象)的内存池,它能够在析构时调用所有已经分配的内存块调用析构函数,从而正确释放资源,需要包含以下头文件: #include < ...