Search code examples
htmlcssinternet-explorermozilla

CSS: How to change class style if another style is hover

I have this css code:

.index-menu {
  float: right;
  width: 100px;
  height: 100px;
}
.index-menu .text-block {
  height: 50px;
  border: 1px solid #d1d300;
  background-color: #ffffff;
  color: #666;
}
.index-menu:hover .text-block {
  color: #000000;
}

How make this code work in IE10-11 and Mozilla? In Chrome this code works perfectly.

Solution

  • In IE10,11 :active, :hover psuedo class don't triggered by child. Solution on IE support page ( by JS ): https://connect.microsoft.com/IE/feedback/details/757765/ie10-active-psuedo-class-should-be-triggered-by-child-elements-too