预览:http://cssdeck.com/labs/w7bzvb5r
点击后是否可以保持导航链接处于活动状态,未选中时是否处于非活动状态?我希望它根据选择的链接更改颜色。例如,鼠标悬停时,它会从黑色变为蓝色。如果它处于活动状态时它如何保持蓝色而在不活动时保持黑色?
答案 0 :(得分:2)
如果你想要的是以某种风格保持活动页面上的链接文本,那么答案是可能的。
有很多方法可以解决这个问题。根据提供的示例替换:
#firstPage { color: #eee; }
#firstPage/slide2 { color: #ddd; }
#firstPage/slide3 { color: #aaa; }
#firstPage/slide4 { color: #ccc; }
以下将起作用:
.fp-viewing-firstPage nav#main a:nth-child(1) { color: #eee; }
.fp-viewing-firstPage-slide2 nav#main a:nth-child(2) { color: #ddd; }
.fp-viewing-firstPage-slide3 nav#main a:nth-child(3) { color: #aaa; }
.fp-viewing-firstPage-slide4 nav#main a:nth-child(4) { color: #ccc; }
这是使用此处引用的CSS3选择器:https://css-tricks.com/almanac/selectors/n/nth-child/
.fp-viewing-firstPage
是一个适用于导航更改的<body>
的类。
在每个链接上设置id或class是另一种选择。