<!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. 都 2021 年了，竟然有人搞大数据时忽略 JSON 而去研究用 C# 把 XML 转换为 XML 的技术

    在大数据项目开发过程中,ETL(Extract-Transform-Load)是必不可少.即便目前 JSON 非常流行,开发人员也有必定会有对远古系统的挑战,而 XML 格式的数据源作为经典存在浑身上 ...

  2. 使用 Yarn workspace,TypeScript,esbuild,React 和 Express 构建 K8S 云原生应用(一)

    本文将指导您使用 K8S ,Docker,Yarn workspace ,TypeScript,esbuild,Express 和 React 来设置构建一个基本的云原生 Web 应用程序. 在本教程 ...

  3. [刷题] PTA 7-64 最长对称子串

    7-64 最长对称子串 我的代码: 1 #include<stdio.h> 2 #include<string.h> 3 #define N 1001 4 5 int main ...

  4. [刷题] 416 Partition Equal Subset Sum

    要求 非空数组的所有数字都是正整数,是否可以将这个数组的元素分成两部分,使得每部分的数字和相等 最多200个数字,每个数字最大为100 示例 [1,5,11,5],返回 true [1,2,3,5], ...

  5. 【转载】搭建本地yum源：以下是以centos7为例子

    搭建本地yum源:以下是以centos7为例子  1)首先需要安装 createrepo(需要一个可以使用源的机器,可以访问互联网)安装方法可以使用yum安装epel源 1 yum -y instal ...

  6. kvm总结复习

    一.虚拟化概念 1.虚拟化技术:在计算机技术中,虚拟化(技术)或虚拟技术(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源(CPU.内存.磁盘空间.网络适配器等),予以 ...

  7. 10.4 route：显示或管理路由表

    route命令 可以显示或管理Linux系统的路由表,route命令设置的路由主要是静态路由. 路由的概念     计算机与计算机之间的数据传输必须得经由网络,而网络可以通过直接连接两台计算机的方式或 ...

  8. windows server 2008 rdp停止服务 - windows server 2012 R2 远程桌面授权模式尚未配置，远程桌面服务将在120天内停止工作

    目录 问题现象 增长rdp服务可使用时长的配置 Via & reference: 问题现象 windows server 2008作为测试环境跳板机,但是没有配置官方的rdp授权,限制用户登录 ...

  9. ssh创建与添加密钥开启免密登陆 免确认机器指纹参数

     主要是两个步骤 1.控制主机创建密钥对(私钥和公钥) 2.把密钥对的公钥加入对方的认证列表中 [root@vps ~]# ssh-keygen [root@vps ~]# ssh-copy-id u ...

  10. pyqt安装

    一.安装PyQt5 pip install PyQt5 二.安装PyQt-tools pip install PyQt-tools *注:mac不需要安装PyQt-tools,能够正常使用,只支持Wi ...