bug on hover element css

Question

I have a problem. If you hover on the triangle, menu will be light transparent. I do not know what is the reason

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

Answer 1

Sorry i do not see any opacity issue, but you could try:

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

    opacity: 1;
}

Answer 2

remove z-index:2; from .item-icon:hover class, and add z-index: 999; to .item-icon class like below:

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

i hope it will help for you

Answer 3

when you hover over triangle, your div's of class item-icon are getting another class active. It might be that you are handling this in jquery where you change color for elements that have class active which results in change of font color of menu.