CSS Hover only works on bottom half of button

Question

I have a few CSS-styled buttons on the navigation on my HTML web-page that has a glass effect to it. However, only the bottom-half (the half without the glass effect) actually appears as it is being hovered over. How can I fix this?

I've already tried tampering with multiple elements in both the CSS and HTML, yet nothing seems to fix it.

Here is my code:

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

Unfortunately this problem is due to the fact that your :after effect is positioned on top of your links. Because you have position: absolute and top: 0 on the :after , it is in the same position as the <a> itself.

You can correct this in a number of ways:

• Setting a z-index on the :after which is lower than that of the #tray-glass element
• Not making the effect start at top: 0
• Not using position: absolute

To be able to have the background alongside functional links, I would recommend turning it into an entirely separate element (such as #overlay ) rather than an :after pseudo-element, and making this new element a sibling of #tray-glass . From here, make sure to give the parent a 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>