
由于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:
bbb
ccc
发表评论