<!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. VSCode配置MSVC+VSCode使用easyx库,2021.5.13日配置

    VSCode配置MSVC+VSCode使用easyx库,2021.5.13日配置~~ 想必很多人和我一样,想用vscode编程c++,easyx库不支持MinGW,一般人都是直接使用vs2019安装e ...

  2. 1.消息队列（queue）

    版权声明:本文为博主原创文章,未经博主允许不得转载.https://www.cnblogs.com/Dana-gx/p/9724545.html 一.基本概念 IPC:Linux下的进程通信.包括6种 ...

  3. [文章]Linux宕机故障分析案例

    [文章]Linux宕机故障分析案例 已采纳 收藏  0  1669 0 马化辉 2018-07-01发布 背景 在Linux系统环境下,服务器宕机发生的频率比较小,但是不少工程师或多或少都会遇到这 ...

  4. shell脚本就是由Shell命令组成的执行文件，将一些命令整合到一个文件中，进行处理业务逻辑，脚本不用编译即可运行。它通过解释器解释运行，所以速度相对来说比较慢。

    shell脚本?在说什么是shell脚本之前,先说说什么是shell. shell是外壳的意思,就是操作系统的外壳.我们可以通过shell命令来操作和控制操作系统,比如Linux中的Shell命令就包 ...

  5. Yarn 集群环境 HA 搭建

    环境准备 确保主机搭建 HDFS HA 运行环境 步骤一:修改 mapred-site.xml 配置文件 [root@node-01 ~]# cd /root/apps/hadoop-3.2.1/et ...

  6. 测试开发：从0到1学习如何测试API网关

    本文来自我的一名学员分享 日常工作中,难免会遇到临危受命的情况,虽然没有这么夸张,但是也可能会接到一个陌生的任务,也许只是对这个概念有所耳闻.也许这个时候会感到一丝的焦虑,生怕没法完成领导交给的测试任 ...

  7. kylin聚合组的使用案例

    在使用kylin聚合组进行优化的时候,往往不知道怎么使用. 这里有2个小案例可以参考. 1. 需要对某个维度进行隔离. 如果有些维度,你不想要它和其他维度一起出现,你就可以单独给它建一个聚合组,并且在 ...

  8. Nginx/LVS/HAProxy对比分析

    Nginx/LVS/HAProxy简单介绍: Nginx:专为性能优化而开发,性能是其最重要的考量,实现上非常注重效率 .它支持内核Poll模型,能经受高负载的考验,有报告表明能支持高达 50,000 ...

  9. 从马尔可夫模型(Markov Model)到隐马尔可夫模型(Hidden Markov Model)

    1.参考资料: 博客园 - 刘建平随笔:https://www.cnblogs.com/pinard/p/6945257.html 哔站up主 - 白手起家的百万富翁:https://www.bili ...

  10. 为鸿蒙OS说两句公道话（我对鸿蒙OS的一些看法）

    为鸿蒙说两句公道话 今天看了鸿蒙系统的评测,看完后我感觉很欣慰,为什么这么说 ? 不是很多人吐槽鸿蒙是 Android 套壳吗 ?或者叫鸿蒙 UI 吗?说鸿蒙没有自己的核心技术.看了鸿蒙系统的设计,底 ...