导航点击变化

最新推荐文章于 2024-08-13 22:07:58 发布

a8852557

最新推荐文章于 2024-08-13 22:07:58 发布

阅读量158

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Jinmj/p/4620749.html

版权

a:link{}//未被访问过的链接

a:hover{}//鼠标位于其上的链接

a:visited{}//已经被访问过的链接

a:active{}// 选择活动链接

例子一：

导航背景色为#0ADDF3；选中后背景色为#04A7CD；鼠标滑过显示颜色#3BB7EF；

html：

　　</div>
</div>

css：

.nav-1 > input, .nav-1 >a {
width: 25%;
height: 50px;
line-height: 50px;
position: fixed;
top: 0;
cursor: pointer;
}

.nav-1 input{
opacity: 0;
z-index: 1000;
}

.nav-1 a{
text-align: center;
text-decoration: none;
color: #fff;
z-index: 10;
font-weight: 700;
background:rgb(4, 226, 244);
text-shadow: 1px 1px 1px rgba(251,3,3,0.5)
}

#st-nav-1 , #st-nav-1+a{
left: 0%;
}
#st-nav-2 ,#st-nav-2+a{
left: 25%;
}
#st-nav-3,#st-nav-3+a{
left: 50%;
}
#st-nav-4,#st-nav-4+a{
left: 75%;
}

.nav-1 input:checked+a, .nav-1 input:checked:hover+a{
background:rgb(4, 167, 205);
}

.nav-1 input:hover+a{
background:rgb(64, 179, 239);
}

.nav-1 input:checked + a:after{
content: "";
width: 0;
height: 0;
overflow: hidden;
border:20px solid transparent;
border-top-color:rgb(4, 167, 205);
position: absolute;
top:100%;
left: 50%;
margin-left: -20px;
}

</style>

例子二：

html：

css：

.li1{
background: red;
font-weight: 800;
}
</style>

这个案例需要用到js来实现，导航的html语句不同

添加了js后：

</script>
</body>

转载于:https://www.cnblogs.com/Jinmj/p/4620749.html

a8852557

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航点击变化

a:link{}//未被访问过的链接a:hover{}//鼠标位于其上的链接a:visited{}//已经被访问过的链接a:active{}// 选择活动链接例子一：导航背景色为#0ADDF3；选中后背景色为#04A7CD；鼠标滑过显示颜色#3BB7EF；html： <div class="nav"> 　　<div class="n...
复制链接

扫一扫