HTML+css中鼠标经过触发等问题

HTML+css中鼠标经过触发等问题

 鼠标经过事件在样式中用hover来使用，hover在css中书写格式大致为

• 选择器:hover {}

• 选择器1:hover 选择器 2{}

选择器:hover {}

这个格式的含义大致为：当鼠标经过选择器时将{}里面的样式表现于选择器

选择器1:hover 选择器2 {}

这个格式的含义大致为：当鼠标经过**选择器1**时将{}里面的样式表现于	**选择器2**

注意： 选择器1:hover 选择器2 {}

在使用这一格式时需注意：
选择器1必须包含选择器2 且 选择器1为父级 选择器2为子级，这样才能实现其功能，例：

/* 子父级：.box1>.box2 */
	.box1 {
		width: 100px;
		height: 100px;
		background-color: red;
		padding: 50px;
		margin-bottom: 30px;
	}
	.box2 {
		width: 100px;
		height: 100px;
		background-color: blue;
	}
	.box1:hover {
		background-color: blue;
	}
	.box1:hover .box2{
		background-color: red;
	}

	<div class="box1">
		<div class="box2"></div>
	</div>

效果如下（鼠标经过之前）： （本文章效果图中淡绿色皆为body背景色）

效果如下（鼠标经过之后）：

几种错误的关系及其效果

选择器1包含选择器2，但选择器1为子级 选择器二为父级，代码及效果如下：

/* 子父级：.box3<box4 */
	.box3 {
		width: 100px;
		height: 100px;
		background-color: green;
	}
	.box4 {
		width: 100px;
		height: 100px;
		padding: 50px;
		background-color: skyblue;
	}
	.box3:hover {
		background-color: blue;
	}
	.box3:hover .box4{
		background-color: red;
	}

<div class="box4">
	
	<div class="box3"></div>
</div>

鼠标经过之前：

鼠标经过之后：

选择器1与选择器2为并列（兄弟级），代码及效果如下：

/* 兄弟级  .box5=.box6 */
	.box5 {
		width: 100px;
		height: 100px;
		background-color: #fdc;
		padding: 50px;
	}
	.box6 {
		width: 100px;
		height: 100px;
		background-color: #bde;
	}
	.box5:hover {
		background-color: blue;
	}
	.box5:hover .box6{
		background-color: red;
	}

<div class="box5"></div>
	<div class="box6"></div>

鼠标经过之前：

鼠标经过之后：

hover也可在并列选择器中的使用，其格式为
选择器1:hover [选择器2]，选择器3:hover [选择器4]，······ {}      （[  ]表示里面的值可以没有）

因本人水平有限，hover只能想到这些，如有不足谅解，文章中如有错误还请指正、见谅！