如何在我的链接下悬停一个栏

时间:2016-01-26 16:58:58

标签: html css

我正在使用css制作一个很酷的导航栏,当我将鼠标悬停在它们上面时,我希望在我的链接下方显示一个栏。基本上我需要将一个方框的背景颜色改变,当我将鼠标悬停在另一个方框上时。

这是我的HTML:

.links {
    float:right;
    font-size:200%;
}

#navbar table{
    margin-top:30px;
    border-spacing:40px 0px;
}

#navbar td {
line-height:30px;
}

.hoverbar {
    height:5px;
}

.link1:hover + .link1hover {
    background-color:#FF5C00;
}

.link2:hover + .link2hover {
    background-color:#FF5C00;
}

a:link {color:black; background-color:transparent; text-decoration:none}
a:visited {color:black; background-color:transparent; text-decoration:none}
a:hover {color:#FF5C00; background-color:transparent; text-decoration:none}
a:active {color:#FF5C00; background-color:transparent; text-decoration:none}

这是我的Css:

{{1}}

2 个答案:

答案 0 :(得分:0)

根据您当前的设置,这些选择器无法正常工作

.link1:hover + .link1hover {
  background-color:#FF5C00;
}

因为.link1hover不在.link1旁边,因为它们都有不同的父母。因此,要使其与您的结构一起使用,您需要使用javascript或重新排列代码,如下所示:



.links {
  float: right;
  font-size: 200%;
}

.link1hover, .link2hover {
  margin: 10px;
  height: 10px;
  width: 300px;
  background: yellow;
}

.link1:hover ~ .link1hover {
  background-color: #FF5C00;
}

.link2:hover ~ .link2hover {
  background-color: #FF5C00;
}

a:link {
  color: black;
  background-color: transparent;
  text-decoration: none
}

a:visited {
  color: black;
  background-color: transparent;
  text-decoration: none
}

a:hover {
  color: #FF5C00;
  background-color: transparent;
  text-decoration: none
}

a:active {
  color: #FF5C00;
  background-color: transparent;
  text-decoration: none
}

<div id="navbar">
  <div class="links">
    <div class="link1"><a href="Index.html">Calvin and Hobbes</a></div>
    <div class="link2"><a href="Index.html">Garfield</a></div>
    <div class="link1hover"></div>
    <div class="link2hover"></div>
  </div>
</div>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

尝试此代码。这将帮助您构建导航栏。只需复制,粘贴并尝试。

<html>
<head>
<title>Welcome !</title>

<style type="text/css">

body{
    margin:0;
  padding: :0;

}
.navigation{
  width: 100%;
  background-color: black;
  height: 50px;
  padding-top: 1px;
  text-align: center;
}

ul li{
  list-style-type: none;
  display: inline;
  width: auto;
  height: 100%;
  margin-left: 50px;
  background-color: orange;
  padding: 10px;
  margin-bottom: 2px;
  border-radius: 5px;

}

ul li:hover{
  background-color: white;

}

ul li a{
  text-decoration: none;
  color: white;
  font-family: helvetica;
  font-size: 20px;


}

ul li a:hover{
  color:orange;
}

</style>


 <body>

  <div class="navigation">
    <ul>
      <li><a href="">Calvin and Hobbes</a></li>
       <li><a href="">Garfield</a></li>
    </ul>
  </div>


 </body>
</html>