<!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. docker容器与容器的关联

    可以通过docker run -it -d --link 容器id 镜像id   方式关联 例如,将springboot项目容器与mysql容器相互关联,让springboot容器可以访问到mysql ...

  2. Java关键字(八)——synchronized

    synchronized 这个关键字,我相信对于并发编程有一定了解的人,一定会特别熟悉,对于一些可能在多线程环境下可能会有并发问题的代码,或者方法,直接加上synchronized,问题就搞定了. 但 ...

  3. pgrep cron

    # pgrep cron947[root@localhost cron]# pgrep --help Usage: pgrep [options] <pattern> Options: - ...

  4. scala :: , +:, :+ , ::: , ++ 的区别

    4 种操作符的区别和联系 :: 该方法被称为cons,意为构造,向队列的头部追加数据,创造新的列表.用法为 x::list,其中x为加入到头部的元素,无论x是列表与否,它都只将成为新生成列表的第一个元 ...

  5. 有关fgets和fcntl的讨论-待整理更新

    问题引出 一个client程序:select 超时监听 sockfd套接字 和 STDIN_FILENO标准输入:若sockfd可读则接收server报文:若标准输入可读(按下回车),则开始用fget ...

  6. gpgj - 06.估值分析举例

    06.估值分析举例 1.举个栗子-贵州茅台的护城河 品牌效益高 只有高档产品 不卖中低档,不会拉低公司收入 {   "question": "我们来复习一下护城河要如何分 ...

  7. Spring Cloud Alibaba系列之分布式服务组件Dubbo

    本博客的例子代码可以在github找到下载链接:代码下载 SpringBoot.SpringCloud Alibaba系列博客专栏:链接 1.分布式理论 1.1.分布式基本定义 <分布式系统原理 ...

  8. Spring的controller接受Date类型数据,接受枚举类型数据

    1. Controller接收Date类型的数据 核心使用@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") 来将传递过来的时间字符串 ...

  9. 优雅关闭springboot应用

    1.添加钩子函数,钩子函数中指定要调用的方法 @PostConstruct public void run() { this.zkClient.start(this); this.schedulerS ...

  10. 聊聊 apt sources.list 文件格式

    前言 之前玩 ubuntu 需要切换国内源地址时,都是网上复制别人提供好的,也不知道是什么意思,拿来就用. 这次花点时间来看一下 apt sources.list 的格式,以及其表示的含义. 格式 s ...