悬停元素CSS上的错误答案

【问题标题】：bug on hover element css悬停元素CSS上的错误
【发布时间】：2015-06-23 21:42:43
【问题描述】：

我有问题。如果将鼠标悬停在三角形上，菜单将是浅色透明的。不知道是什么原因

.item-icon:hover{
transform: scale(1.25);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
z-index: 2;
}

【问题讨论】：

标签： css opacity

【解决方案1】：

抱歉，我没有看到任何不透明问题，但您可以尝试：

.item-icon:hover{
    transform: scale(1.25);
    -webkit-transform: scale(1.25);
    -moz-transform: scale(1.25);
    z-index: 2;

    opacity: 1;
}

【讨论】：

【解决方案2】：

从.item-icon:hover 类中删除z-index:2;，并将z-index: 999; 添加到.item-icon 类，如下所示：

.item-icon {
  width: 48%;
  position: absolute;
  transition: all .2s ease-in-out;
  z-index: 999;
}

希望对你有帮助

【讨论】：

【解决方案3】：

当您将鼠标悬停在三角形上时，您的 item-icon 类的 div 将获得另一个类 active。可能是您在 jquery 中处理此问题，您在其中更改具有 active 类的元素的颜色，这会导致菜单字体颜色的更改。

【讨论】：

不，你看，这些三角形与右侧菜单交互。如果您尝试将鼠标悬停在右侧的菜单上，您将同时看到突变
是的，当您将鼠标悬停在不同的三角形上时，我可以看到相应的右侧菜单条目和颜色会发生变化。这就是你想要的。为什么顶部水平菜单会改变颜色...我目前无法确定。我会在家里用各种浏览器进行测试，也许这会让我更接近给你一个答案。