[英]How to apply different color to each child in navigation using CSS
I am working with HTML and CSS and I am trying to change color of first child in navigation.我正在使用 HTML 和 CSS,我正在尝试更改导航中第一个孩子的颜色。 I am trying to achieve that all items in my navigation are in different colors and when hover on them that they rotate to side a bit.
我试图实现导航中的所有项目都具有不同的颜色,并且当悬停在它们上面时,它们会稍微旋转到一边。 Great example is on this website here: https://www.templatemonster.com/demo/54875.html
很好的例子在这个网站上: https : //www.templatemonster.com/demo/54875.html
Here is my navigation code:这是我的导航代码:
.navigation li { display: inline-block; } .navigation li:nth-child(1) { background: #ffc200; } .navigation a { color: #FFF; white-space: nowrap; padding: 25px 29px 31px; } .navigation a:hover, .navigation a.active { color: #fff; -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
<nav class="navigation" role="navigation"> <ul class="primary-nav"> <li><a href="#intro">About</a></li> <li><a href="#services">services</a></li> <li><a href="#works">Works</a></li> <li><a href="#teams">Our Team</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>
Navigation in my project is also fixed on scroll like in example.我的项目中的导航也像示例一样固定在滚动上。
You can target each child using li:nth-child()
and achieve your other goal of rotating them using transform: rotate(5deg);
您可以使用
li:nth-child()
定位每个孩子,并使用transform: rotate(5deg);
实现旋转它们的另一个目标transform: rotate(5deg);
.navigation li { display: inline-block; } .navigation a { white-space: nowrap; padding: 25px 29px 31px; } li:nth-child(1) a { background: #636393; } li:nth-child(2) a { background: #B5222D; } li:nth-child(3) a { background: #D4953C; } li:nth-child(4) a { background: #609491; } li:hover{ transform: rotate(5deg); }
<nav class="navigation" role="navigation"> <ul class="primary-nav"> <li><a href="#intro">About</a></li> <li><a href="#services">services</a></li> <li><a href="#works">Works</a></li> <li><a href="#teams">Our Team</a></li> </ul> </nav>
Based on the code of the other site.. This would be the transformation that you are looking for.基于其他站点的代码。这将是您正在寻找的转换。
.navigation li { display: inline-block; } .navigation li:nth-child(1){ background: #ffc200; } .navigation a { color: #FFF; white-space: nowrap; padding: 25px 29px 31px; } .navigation a:hover, .navigation a.active { color: #fff; -webkit-transform: rotate(-7deg); transform: rotate(-7deg); } .navigation li:hover{ -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); -o-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
<nav class="navigation" role="navigation"> <ul class="primary-nav"> <li><a href="#intro">About</a></li> <li><a href="#services">services</a></li> <li><a href="#works">Works</a></li> <li><a href="#teams">Our Team</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>
So to start of I am using :nth-child()
pseudo selector to set the colors of the different element!所以一开始我使用
:nth-child()
伪选择器来设置不同元素的颜色!
.navigation li:nth-child(1) {
background: gray;
}
Then to rotate the div, I think its better if we add the :hover
pseudo selector to the li
tag instead of the a
tag since the transform will happen on mouse over of the entire div instead of only the a
tag.然后旋转 div,我认为如果我们将
:hover
伪选择器添加到li
标签而不是a
标签会更好,因为转换将发生在鼠标悬停在整个 div 上而不是仅a
标签上。 The corresponding CSS class for that is.对应的 CSS 类是。
.navigation li:hover,
.navigation li:active {
color: #fff;
-webkit-transform: rotate(-7deg);
-moz-transform: rotate(-7deg);
-o-transform: rotate(-7deg);
-ms-transform: rotate(-7deg);
transform: rotate(-7deg);
}
I have also added the text-decoration:none
to the a
tag to remove the underline which is present by default.我还在
a
标签中添加了text-decoration:none
以删除默认情况下存在的下划线。
Please refer to the below snippet and let me know if there are any issues!请参考下面的代码片段,如果有任何问题,请告诉我!
.navigation li { display: inline-block; } .navigation li:nth-child(1) { background: gray; } .navigation li:nth-child(2) { background: magenta; } .navigation li:nth-child(3) { background: purple; } .navigation li:nth-child(4) { background: orange; } .navigation li:nth-child(5) { background: red; } .navigation li:nth-child(6) { background: lightblue; } .navigation a { color: #FFF; white-space: nowrap; padding: 25px 29px 31px; text-decoration:none; } .navigation li:hover, .navigation li:active { color: #fff; -webkit-transform: rotate(-7deg); -moz-transform: rotate(-7deg); -o-transform: rotate(-7deg); -ms-transform: rotate(-7deg); transform: rotate(-7deg); }
<nav class="navigation" role="navigation"> <ul class="primary-nav"> <li><a href="#intro">About</a></li> <li><a href="#services">services</a></li> <li><a href="#works">Works</a></li> <li><a href="#teams">Our Team</a></li> <li><a href="#testimonials">Testimonials</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav>
This should get you started on what you want (if i understand your question correctly) Most of this code was copied from the link you supplied这应该让你开始你想要的(如果我正确理解你的问题)大部分代码是从你提供的链接中复制的
the main difference in this code from the other answers is the background rotates but NOT the text此代码与其他答案的主要区别是背景旋转而不是文本
ol,ul { list-style: none; } /*each of your colors can be set here*/ .sf-menu>li:nth-child(1):after { background: #ffc200; } .sf-menu>li:nth-child(2):after { background: red; } .sf-menu>li:nth-child(3):after { background: green; } .sf-menu>li:nth-child(4):after { background: blue; } .sf-menu>li:nth-child(5):after { background: blueviolet; } .sf-menu>li { position: relative; float: left; z-index: 0; margin: 0 20px; } .sf-menu { display: inline-block; } .sf-menu>li>a { font-size: 18px; line-height: 28px; padding: 11px 15px; } .sf-menu>li>a { color: #FFF; font: 600 24px/35px "Raleway", sans-serif; white-space: nowrap; padding: 25px 29px 31px; text-decoration: none; } .sf-menu:before, .sf-menu:after { display: table; content: ""; line-height: 0; } .sf-menu a { display: block; } .sf-menu>li:after { content: ''; position: absolute; -webkit-border-radius: 16px; -moz-border-radius: 16px; border-radius: 16px; left: 0; right: 0; bottom: 0; top: 0; z-index: -1; outline: 1px solid transparent; -moz-transition: 0.3s; -o-transition: 0.3s; -webkit-transition: 0.3s; transition: 0.3s; } .sf-menu>li.sfHover:after, .sf-menu>li:hover:after, .sf-menu>li.active:after { -moz-transform: rotate(-7deg); -ms-transform: rotate(-7deg); -o-transform: rotate(-7deg); -webkit-transform: rotate(-7deg); transform: rotate(-7deg); }
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet"> <nav class="nav"> <ul class="sf-menu"> <li class="active"> <a href="./">Home</a> </li> <li class=""> <a href="index-1.html">About school</a> </li> <li class=""> <a href="index-2.html">Class schedules</a> </li> <li> <a href="index-3.html">Kids' art gallery</a> </li> <li> <a href="index-4.html">Contacts</a> </li> <li> <a href="index-4.html">link</a> </li> </ul> </nav>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.