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

【问题标题】：How to have a bar hover under my links如何在我的链接下悬停一个栏
【发布时间】：2016-01-26 16:58:58
【问题描述】：

我正在使用 css 制作一个看起来很酷的导航栏，当我将鼠标悬停在链接上时，我希望在链接下方出现一个导航栏。基本上，当我将鼠标悬停在另一个框上时，我需要改变一个框的背景颜色。

这是我的html：

<div id="navbar">
    <div class="links">
        <table>
        <tr>
            <td class="link1"></td><a href="Index.html">Calvin and Hobbes</a></td>
            <td class="link2"><a href="Index.html">Garfield</a></td>
        </tr>
        <tr class="hoverbar">
            <td class="link1hover"></td>
            <td class="link2hover"></td>
        </tr>
        </table>
    </div>
</div>

这是我的 Css：

.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}

【问题讨论】：

标签： html css

【解决方案1】：

在您当前的设置下，这些选择器不起作用

.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>

【讨论】：

好的。所以我重新排列了我的代码，所以表格被替换为 div 框，现在它似乎可以工作了。所以我总是用 ~ 替换 +
+ 表示直接兄弟。因此，如果您使用 .link1:hover + div 来定位它旁边的 div (.link2) 因为您要定位的元素不是直接靠近它，那么您需要通用兄弟选择器 ~

【解决方案2】：

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

<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>

【讨论】：