导航悬停效果

时间:2018-04-25 15:37:29

标签: html css menu navigation hover

我一直在努力创建我的第一个htmlcss网站,但是现在我被困在导航中因为我试图在链接中做悬停效果,我是什么想要的是当你悬停一个链接时,一个框应该出现在一个链接上,这个框会有一个阴影,你可以帮帮我吗?

谢谢!

这是我的导航代码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;
}

我想要的例子:https://w3layouts.com/preview/?l=/boombox-a-entertainment-category-flat-bootstrap-responsive-template/

2 个答案:

答案 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选择器中。我希望这会有所帮助。