<!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. ==与equals比较

    提到==与equals的区别,这就必须先回顾一下jvm内存的分配机制 ==和equals无非比较两个基本数据类型或者对象类型 八种基本类型: 基本类型 大小 默认值 封装类 byte 1 0 Byte ...

  2. Linux VMware Tools详解

    VMware Tools描述 VMware Tools 中包含一系列服务和模块,可在 VMware 产品中实现多种功能,从而使用户能够更好地管理客户机操作系统,以及与客户机系统进行无缝交互. 在Lin ...

  3. 华为鲲鹏处理器实现商用，Arm服务器又添砝码

    华为鲲鹏处理器实现商用,Arm服务器又添砝码 鲲鹏920就是华为海思1620 鲲鹏920面向 服务器CPU就是 华为海思162064core 武汉华为PC不是海思1620是另一个cpu 深圳华为PC的 ...

  4. IT菜鸟之网线制作

    网线是属于OSI七层模型中的物理层:网络中的数据传输媒介 备注:OSI七层模型后面会记录 网线制作所需要的资源素材: 1.网线 2.水晶头(类型:电话线RJ11,宽带线RJ45) 3.网线钳(非必需) ...

  5. 010.kubernets的调度系统之daemonset

    daemonset简单操作使用 Deployment 是 Kubernetes 中用于处理无状态服务的资源,而 StatefulSet 是用于支持有状态服务的资源,这两种不同的资源从状态的角度对服务进 ...

  6. 009.kubernets的调度系统之污点和容忍

    Taints和Tolerations(污点和容忍) Taint需要与Toleration配合使用,让pod避开那些不合适的node.在node上设置一个或多个Taint后,除非pod明确声明能够容忍这 ...

  7. # useradd -u 700 -g users vbird2

    [root@linux ~]# ls -l /homedrwxr-xr-x 3 vbird1 vbird1 4096 Aug 30 17:33 vbird1[root@linux ~]# grep v ...

  8. MyBatis 延迟加载（十四）

    什么是延迟加载 延迟加载又叫懒加载,也叫按需加载,也就是说先加载主表信息,需要的时候,再去加载从表信息.代码中有查询语句,当执行到查询语句时,并不是马上去数据库中查询,而是根据设置的延迟策略将查询向后 ...

  9. Bootstrap Bootstrap3 与 Bootstrap4 的区别

    Bootstrap3 与 Bootstrap4 官网地址 Bootstrap3 官网:https://v3.bootcss.com Bootstrap4 官网:https://v4.bootcss.c ...

  10. 思考一个问题STM32的

    如果一个定时中断刚刚进入中断服务函数 但是服务函数执行时间太长   又一次触发了中断 会怎样