Question

我在youtube（https://www.youtube.com/watch?v=Wwe2zOz030o）上按照本教程制作了转换导航栏。但是，我想要的是在我点击的页面上保持效果，例如。当我查看页面时，Home导航将保持扩展，但我想保持其他菜单项的转换效果...所以如果我在HOME页面上，那么无论我是否悬停在主页按钮上都会保持扩展是不是，但如果我将鼠标悬停在另一个菜单项上，则会扩展并缩小主页按钮的大小，以便它始终填充相同的空间。

我希望这有意义......这是我的编码http://jsfiddle.net/h0fe2txL/

的链接

提前感谢您的帮助！

</style>
</head>
<link href='http://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet'    type='text/css'>
<body>
<div id="container">
<a href="#"><div class="menu">
<p class="p1">HOME</p>
<p class="p2">THIS IS OUR INTRO  </p>
</div>
</a>

<a href="#"><div class="menu1">
<p class="p1">GALLERY</p>
<p class="p2">THIS IS MY GALLERY</p>
</div>
</a>

<a href="#"><div class="menu2">
<p class="p1">PROJECTS</p>
<p class="p2">MY ART COLLECTION</p>
</div>
</a>

<a href="#"><div class="menu3">
<p class="p1">CONTACT</p>
<p class="p2">CONTACT ME</p>
</div>
</a>

</div>
</body>
</html>

CSS代码 -

a{text-decoration:none;
}

body{
}

#container{
height: 125px;
width: 915px;
background-color: transparent;
position: relative;
margin-right: auto;
margin-left: auto;
border: medium dashed rgba(0,0,0,1);
}   
.menu{
height: 125px;
width: 150px;
background-color:rgba(204,0,51,1);
float: left;
transition: all .5s ease-in-out 0s;
text-decoration: none;
margin-right: 5px;
}

.menu1{
height: 125px;
width: 150px;
background-color:rgba(0,102,51,1);
float: left;
transition: all .5s ease-in-out 0s;
margin-right: 5px;
}

.menu2{
height: 125px;
width: 150px;
background-color:rgba(0,102,153,1);
float: left;
transition: all .5s ease-in-out 0s;
margin-right: 5px;
}

.menu3{
height: 125px;
width: 150px;
background-color:rgba(255,102,51,1);
float: left;
transition: all .5s ease-in-out 0s;
}
.p1{
font-family: "Permanent Marker", cursive;
font-size: 25px;
color: rgba(228,228,228,1);
font-weight: bold;
position: relative;
width: 100px;
top: 0px;
left: 7px;
transition: all .2s ease-in-out 0s;
text-align: center;
}
.p2{
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
color: rgba(255,255,255,.5);
position: relative;
top: 0px;
left: 11px;
transition: all .2s ease-in-out 0s;
}
.menu:hover{
width:450px;
 }
 .menu1:hover{
width:450px;
}
.menu2:hover{
width:450px;
}
.menu3:hover{
width:450px;
}

.menu:hover .p1{
color:rgba(255,255,255,1);
}
.menu:hover .p2{
color:rgba(255,255,255,1);
}

.menu1:hover .p1{
color:rgba(255,255,255,1);
 }
.menu1:hover .p2{
color:rgba(255,255,255,1);
}

.menu2:hover .p1{
color:rgba(255,255,255,1);
}
.menu2:hover .p2{
color:rgba(255,255,255,1);
}

.menu3:hover .p1{
color:rgba(255,255,255,1);
 }
.menu3:hover .p2{
color:rgba(255,255,255,1);
}

CSS Transition Nav Bar - 如何在页面上保持效果

0 个答案: