:hover伪类选择器常见用法示例

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

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:

bbb
ccc

发表评论

发表评论

*