：hover的使用，即当鼠标指针移入元素时，所做出的样式设置
示例一
html>
<meta>
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
ul li{
width: 300px;
margin-top: 10px;
background: #ff0000;
}
ul li:hover{
background: #000000;
}
</style>
以上情况存在于当鼠标指针移入元素，通过：hover使该元素自身改变新的样式
示例二
html>
<meta>
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover .content{
background: #000000;
}
</style>
<p>
</p><p></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/7509" title="可爱卡通人鼠标悬停动画特效"><img
src="https://img.php.cn/upload/jscode/000/000/164/641ae14703f80155.png" alt="可爱卡通人鼠标悬停动画特效" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/js/7509" title="可爱卡通人鼠标悬停动画特效" class="overflowclass">可爱卡通人鼠标悬停动画特效</a>
<p class="overflowclass">可爱卡通人鼠标悬停动画特效</p>
</div>
<a rel="nofollow" href="/xiazai/js/7509" title="可爱卡通人鼠标悬停动画特效" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
以上示例中，当存在父子关系的时候，可以通过父级的：hover使得子级的样式发生改变，写法为 .container:hover .content，hover后面有一个空格；但是，子级：hover改变不了父级的样式
示例三
html>
<meta>
<title>demo01</title>
<style>
*{
margin: 0;
padding: 0;
}
.container{
width: 300px;
height: 300px;
border: 1px solid #ff9f5a;
}
.content{
width: 100px;
height: 100px;
background: #27e7ff;
}
.container:hover +.content{
background: #000000;
}
</style>
<p></p>
<p></p>
以上示例，当两个元素不是父子关系，为同胞兄弟关系时，则通过 .container:hover .content这样的写法是无效的，则需要通过“+”号，即 .container:hover +.content才能显示出效果；但是要注意两个元素的先后顺序哦~
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
