由于seek.moe域名不再续费，下面的部分演示和链接失效

光标悬停在父元素上时更改子元素样式

HTML

<div id="father">
<div id="son">
<center>
<a href="https://urusai.me" target="_blank" class="links" id="a1">?前往博客</a><a class="links">　・　</a><a class="links" href="https://debugging.work" target="_blank" id="a2">?前往CV页</a><a class="links">　・　</a><a class="links" href="https://ide.seek.moe" target="_blank" id="a3">?前往IDE</a>
</center>
</div>
</div> 

CSS

/*定义动画*/
/*循环摆动*/
@keyframes thrill {
from {
transform: rotate(2deg);
}
to {
transform: rotate(-2deg);
}
}
/*从下方进入*/
@keyframes comeIn {
from {
bottom: -20px;
}
to {
bottom: 20px;
}
}
/*father样式*/
#father {
width: 350px;
padding: 16px 0 16px 0;
position: fixed;
left: 0;
right: 0;
bottom: 0px;
margin: auto;
border-radius: 16px;
/*绑定动画*/
animation: thrill 2s infinite alternate ease-in-out;
}
/*son样式*/
#son {
width: 350px;
padding: 16px 0 16px 0;
position: fixed;
left: 0;
right: 0;
bottom: 20px;
margin: auto;
border-radius: 16px;
background: rgba(255,150,173,.4);
box-shadow: 0 3px 6px 0 rgba(0,0,0,.2);
/*绑定动画，此处为动画嵌套*/
animation: comeIn .5s;
}
/*调整不同屏幕下的宽度*/
@media all and (min-width:1280px){
#comeIn, #blog{
width:380px;
}
}
/*优化小屏体验（滑稽）*/
@media all and (max-width:369px){
#blog
{
display:none;
}
}
/*鼠标悬停时或激活时更改背景颜色*/
#son:hover,#son:active {
background-color: rgba(255,150,173,.8);
}
/*文本样式*/
.links {
width: 100%;
text-decoration: none;
color: black;
font-weight: 300;
padding: 16px 0 16px 0;
}

/*div激活时，改变.links（即文本）的颜色，具体用法为上级元素（的id或class）:hover .下级元素（的id或class）{样式}*/
div:hover .links {
color: #f2f2f2;
}

/*文本激活时的颜色*/
#a1:hover, #a2:hover, #a3:hover {
color:white;
}

光标悬停时改变兄弟元素的CSS样式

HTML

<div id="father">
<div id="son1">bbb</div>
<div id="son2">ccc</div>
</div>

CSS

/*设置字体为红色*/
#son1,#son2 {
color:red;
}
/*当光标悬停于#son1时，son2的字体颜色从红变黑，与上面的示例相比较，关键在于一个+号，以及兄弟元素之间不得有其他元素隔断。另外，它还可以结合nth-child() 选择器灵活使用，这里就不细说了，请自行编写代码去实验理解。规则为共同父元素（的id或class） 悬停的子元素（的id或class）:hover + 要改变的子元素（的id或class）{样式}*/
#father #son1:hover + #son2 {
color:black;
}
 更多请参阅CSS 相邻兄弟选择器

效果展示

展示1：
SeekMoe

展示2：