Question

我的HTML网页上的导航上有一些CSS样式的按钮，具有玻璃效果。但是，实际上，只有将下半部分（没有玻璃效果的下半部分）悬停在上面。我该如何解决？

我已经尝试过篡改CSS和HTML中的多个元素，但似乎没有任何解决办法。

这是我的代码：

// For Main Navigation: 
#tray {
  background-color: #BFBFBF;
}

#tray li a {
  color: #404040;
}

#tray li#tray-active a {
  background-color: #DD1600;
  color: #FFF;
}

#tray li a:hover {
  background-color: #9F9F9F;
  color: #FFF;
}

//Glass Effect:
#tray-glass:after {
  content: '';
  display: block;
  position: absolute;
  top: 0.6px;
  left: 2px;
  width: calc(68% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  opacity: 0.15;
}

<ul>
  <div id="tray-glass">
    <li id="tray-active"><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</a></li>
    <li><a href="#"><span id="tray-glass">Name</a></li>
    <li><a href="#"><span id="tray-glass">Name</a></li>
    <li><a href="#"><span id="tray-glass">Name</a></li>
    <li><a href="#"><span id="tray-glass">Name</a></li>
    <li><a href="#"><span id="tray-glass">Name</a></li>
  </div>
</ul>

Answer 1

很遗憾，此问题是由于您的:after效果位于链接的顶部上。因为您在position: absolute上有top: 0和:after，所以它与<a>本身的位置相同。

您可以通过多种方式更正此问题：

在z-index元素上设置一个:after，该元素低于#tray-glass元素
不能使效果始于top: 0
不使用position: absolute

为了使功能链接旁边有背景，我建议将其变成一个完全独立的元素（例如#overlay），而不是一个:after伪元素，并制作这个新元素#tray-glass的兄弟姐妹。在这里，请确保给父母position: relative。

#tray {
  background-color: #BFBFBF;
}

#tray li a {
  color: #404040;
}

#tray li#tray-active a {
  background-color: #DD1600;
  color: #FFF;
}

#tray li a:hover {
  background-color: #9F9F9F;
  color: #FFF;
}

.container {
  position: relative;
}

#overlay {
  content: '';
  display: block;
  position: absolute;
  z-index: -1;
  top: 0.6px;
  left: 2px;
  width: calc(68% - 4px);
  height: 50%;
  background: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.2));
  opacity: 0.15;
  background: red /* Added for demonstration */
}

<ul>
<div class="container">
  <div id="tray-glass">
    <li id="tray-active"><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</span></a></li>
    <li><a href="#"><span id="tray-glass">Name</span></a></li>
  </div>
  <div id="overlay"></div>
  </div>
</ul>

CSS悬停仅在按钮的下半部分起作用

1 个答案: