CSS：hover仅在按钮的下半部分起作用

Question

有问题的页面： http://rainbowdoge.000webhostapp.com

情况： 我在左侧的导航菜单中有两个按钮。 上部包含一个Hitbox（黑色，用于测试）和一个彩虹图像。图像正在更改悬停时的不透明度。 的CSS代码：

.icon {
opacity: 0.6;
backface-visibility: hidden;
transition: opacity 0.3s ease-in-out;
}
.iconHitbox:hover .icon {
opacity: 1;
cursor: pointer;
}

页面上还有一个iframe。 iconHitbox会在单击时更改iframe的来源。

问题： 如果将鼠标悬停在按钮的上半部分，则不透明度不会改变，就好像没有检测到悬停一样。

我能想到的解决方案： 我以为可能有其他问题，但是不行，当我单击按钮的上半部分时，setSrc（）函数会起作用。

Answer 1

之所以发生这种情况，是因为您的#test1，#test2和#test3元素位于彩虹圈的一半位置。您需要将它们移开。

Answer 2

标识为“ test3”的div与您的图标重叠。您可以在浏览器的开发工具中看到它。

Answer 3

您已设置absolute。如果您删除绝对值，然后调整位置，那将会很好。

尝试：

#mainPageIcon {
    background-color: black;
    position: relative;
    top: 25px;
}

.iconHitbox {
   height: 8vh;
   width: 8vh;
}