我一直在努力创建我的第一个html
和css
网站,但是现在我被困在导航中因为我试图在链接中做悬停效果,我是什么想要的是当你悬停一个链接时,一个框应该出现在一个链接上,这个框会有一个阴影,你可以帮帮我吗?
谢谢!
这是我的导航代码atm:
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li><a href="#about_us">ABOUT US</a></li>
<li><a href="#search">SEARCH</a></li>
<li><a href="#top_artists">TOP ARTISTS</a></li>
<li><a href="#contacts">CONTACTS</a></li>
</ul>
</nav>
</div>
的CSS:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000; }
.main-nav li{
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
}
.main-nav li a:link
.main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
transition: background 0.3s ease-in-out;
}
答案 0 :(得分:0)
你有这样的事吗?
nav ul li a:hover {
background-color: #333333;
color: #FFFFFF;
box-shadow: 2px 10px 8px #888888;
}
答案 1 :(得分:0)
以下是符合您预期行为的代码段:
.main-nav {
background-color: #2c3136;
width: 100%;
height: 70px;
text-align: center;
box-shadow: 0 0 5 0 #000;
}
.main-nav li {
display: inline;
list-style: none;
}
.main-nav li a {
text-decoration: none;
color: white;
margin-right: 50px;
font-size: 90%;
font-weight: bold;
padding: 4px;
border-radius: 4px;
}
.main-nav li a:link .main-nav li a:visited {
padding: 8 0;
color: #fff;
background: transparent;
transition: background 0.3s ease-in-out;
}
.main-nav li a:hover,
.main-nav li a:active {
color: #fff;
background: #5a5a5a;
box-shadow: 4px 4px 4px #000;
transition: background 0.3s ease-in-out;
}
<div class="row">
<nav class="main-nav nav-js">
<img class="logo" src="" alt="">
<ul>
<li><a href="#about_us">ABOUT US</a></li>
<li><a href="#search">SEARCH</a></li>
<li><a href="#top_artists">TOP ARTISTS</a></li>
<li><a href="#contacts">CONTACTS</a></li>
</ul>
</nav>
</div>
我已将padding: 4px;
和border-radius: 4px;
添加到您的.main-nav li a
选择器中,并将box-shadow: 4px 4px 4px #000;
添加到您的.main-nav li a:hover, .main-nav li a:active
选择器中。我希望这会有所帮助。