html导航悬停,CSS3实现菜单悬停效果

实现效果：

html

Home

About

Contact

Shop

Home

About

Contact

Shop

Home

About

Contact

Shop

css

@import url(https://fonts.googleapis.com/css?family=Raleway);

body {

margin: 0px;

}

nav {

margin-top: 40px;

padding: 24px;

text-align: center;

font-family: Raleway;

box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);

}

#nav-1 {

background: #3fa46a;

}

#nav-2 {

background: #5175C0;

}

#nav-3 {

background: #EEA200;

}

.link-1 {

transition: 0.3s ease;

background: #3fa46a;

color: #ffffff;

font-size: 20px;

text-decoration: none;

border-top: 4px solid #3fa46a;

border-bottom: 4px solid #3fa46a;

padding: 20px 0;

margin: 0 20px;

}

.link-1:hover {

border-top: 4px solid #ffffff;

border-bottom: 4px solid #ffffff;

padding: 6px 0;

}

.link-2 {

transition: 0.6s;

color: #ffffff;

font-size: 20px;

text-decoration: none;

border-right: 2px dotted transparent;

padding: 30px 8px 0 10px;

margin: 0 10px;

}

.link-2:hover {

border-right: 2px dotted #ffffff;

padding-bottom: 24px;

}

.link-3 {

transition: 0.4s;

color: #ffffff;

font-size: 20px;

text-decoration: none;

padding: 0 10px;

margin: 0 10px;

}

.link-3:hover {

background-color: #ffffff;

color: #EEA200;

padding: 24px 10px;

}

以上就是CSS3实现菜单悬停效果的详细内容，更多关于css3 菜单悬停的资料请关注脚本之家其它相关文章！