Question

我正在制作一个“登录/注册”框，以便坚持到页面顶部。但是，我在使用水平列表来改变悬停时的backgroundg颜色时遇到了麻烦。这是代码：

/* Regbox */
ul#regbox{
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li{
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child{
  border-bottom-right-radius: 5px;
}
ul#regbox li a{
  text-decoration: none;
  padding: 5px;
}
a:hover{
background-color: rgba(100, 100, 100, 0.5);
border-radius: 5px;
}

  <div id="regbox">
    <ul id="regbox">
      <li><a href="">Login</a>
      <li><a>|</a>
      <li><a href="">Register</a>
      </ul>
  </div>

我希望列表条目在悬停时改变颜色，类似于：

ul#navigation{
  width: 12px;
  float: left;
  padding: 0;
  position: fixed;
}
ul#navigation li{
  list-style: none;
  background-color: rgba(77, 77, 77, 0.8);
  float: left;
  font-size: 20px;
  margin: 0;
  width: 70px;
}
ul#navigation li:last-child{
    border-bottom-left-radius: 5px;
}
ul#navigation li:first-child{
    border-top-left-radius: 5px;
}
ul#navigation li a{
  display: block;
  padding: 5px;
  text-decoration: none;
}
a:link, a:visited{
  color: rgb(0, 0, 0);
}
a:hover{
background-color: rgba(77, 77, 77, 0.5);
border-radius: 5px;
}

  <nav>
  <ul id="navigation">
  <li><a href="main.html">Home</a>
  <li><a href="store.html">Store</a>
  <li><a href="about.html">About</a>
</ul>
</nav>

我尝试在悬停时将显示设置为“阻止”，但这只会打破列表。

提前感谢您提供任何帮助

/的Ivar

Answer 1

我伪解决了。我写了它来改变<li>背景的颜色而不是<a>背景的颜色。它现在看起来像这样：

＆＃13;

ul#regbox{
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li{
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child{
  border-bottom-right-radius: 5px;
}
ul#regbox li a{
  text-decoration: none;
  padding: 5px;
}
ul#regbox li:last-child:hover{
  background-color: rgba(64, 64, 64, 1);
}
ul#regbox li:first-child:hover{
  background-color: rgba(64, 64, 64, 1);
}

＆＃13;

  <div id="regbox">
    <ul id="regbox">
      <li><a href="">Logga in</a>
      <li><a>|</a>
      <li><a href="">Registrera dig</a>
      </ul>
  </div>

＆＃13;

如果有人有更好的解决方案，我全都耳朵！

Answer 2

＆＃13;

#navcontainer ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}

#navcontainer ul li { display: inline; }

#navcontainer ul li a
{
text-decoration: none;
padding: .2em 1em;
color: #fff;
background-color: #036;
}

#navcontainer ul li a:hover
{
color: #fff;
background-color: #369;
}

＆＃13;

<div id="navcontainer">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Store</a></li>
<li><a href="#">About</a></li>

</ul>
</div>

＆＃13;

Answer 3

我对原始的CSS和HTML进行了一些调整。

（1）摆脱id上的div，ID值在页面上应该是唯一的。

（2）在孩子li上，我使用float: left代替display: inline。

（3）您可以按如下方式简化悬停规则：

ul#regbox li:hover a {
    background-color: rgba(64, 64, 64, 1);
}

如果你保持“|” a标记之外的字符，您无需担心将鼠标悬停在其上。

在大多数情况下，你非常接近一个好的解决方案，所以你很顺利。

ul#regbox {
  width: auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}
ul#regbox li {
  list-style: none;
  float: left;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}
ul#regbox li:last-child {
  border-bottom-right-radius: 5px;
}
ul#regbox li a {
  text-decoration: none;
  padding: 5px;
}
ul#regbox li:hover a {
  background-color: rgba(64, 64, 64, 1);
}

<div>
  <ul id="regbox">
    <li><a href="">Logga in</a></li>
    <li>|</li>
    <li><a href="">Registrera dig</a></li>
  </ul>
</div>

Answer 4

你不要关闭那些li标签，并在div和ul中使用相同的ID。而且在你的问题中，你在ul＃regbox li a {}之后还有一个额外的“}”。同时在css部分注释：悬停。如果您有任何问题，请在评论中提问我

    ul#regbox {
  width:auto;
  position: fixed;
  padding: 0;
  float: left;
  top: -15;
  left: 0;
}

ul#regbox li {
  list-style: none;
  display: inline;
  background-color: rgba(77, 77, 77, 1);
  padding: 5px;
  box-shadow: 5px 5px 5px #000000;
}

ul#regbox li:last-child {
  border-bottom-right-radius: 5px;
}

ul#regbox li a {
  text-decoration: none;

}

ul#regbox li:hover {
  background: blue; /* you can use your color */
  border-radius: 5px;
color:white; /* set this for text color you can remove this*/
}

<div>
  <ul id="regbox">
<li><a href="">Login</a></li>
<li><a>|</a></li>
<li><a href="">Register</a></li>
  </ul>
</div>

在水平无序列表中悬停时更改背景颜色？

4 个答案: