鼠标移出和鼠标移入事件

<style>
    *{
    margin-top: 0;
    padding: 0;
    box-sizing: border-box;
    }
    .navigation_else{
    width: 300px;
    height: 300px;
    }
  
    .navigation_else div img{
    width: 300px;
    height: 300px;
    }
    .navigation_else P{
    width: 300px;
    height: 20px;
    }
  
  </style>

<div class="navigation_else">
    <div>
    <img src="https://pic.imgdb.cn/item/659c9383871b83018a57d30d.jpg" alt="" />
    </div>
    <p>鼠标移出和移出事件</p>
  </div>

<script>
    //鼠标移入事件
    $(".navigation_else").mouseenter(function() {
    $(this).children(1).css("color", " #f425a1");
    $(this).children(0).children(0).attr('src', 'https://pic.imgdb.cn/item/659c93a2871b83018a58177d.jpg')
    });
  
    //鼠标移出事件
    $(".navigation_else").mouseleave(function() {
    $(this).children(1).css("color", " #0FDBDA");
    $(this).children(0).children(0).attr('src', 'https://pic.imgdb.cn/item/659c9383871b83018a57d30d.jpg')
    });
  
    // children是找这个div的孩子的第几个,然后就是更改样式了
    // 将目标元素的子元素中索引为 1 的元素（即第二个子元素）的字体颜色修改为 "#0FDBDA"。
    // 将目标元素的子元素中索引为 0 的元素（即第一个子元素）的第一个子元素（子元素的子元素）的 src 属性修改为指定的图片地址。
  </script>