鼠标移出和鼠标移入事件

当鼠标放上去之后更改样式，当鼠标移出去后更改样式。

CSS：

<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>

HTML：

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

JS：

<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>

记得请求jquery文件