悬停不会更改字体颜色

Question

我有此代码：

.indexKomunikatyHover:hover>.indexKomunikatyHoverA>.indexKomunikatyData,
.indexKomunikatyHover:hover,
indexKomunikatyHoverLink.a:hover {
  background-color: #A92525;
  color: white;
  border-radius: 15px;
}

.indexKomunikatyHover:hover a>.indexKomunikatyHoverA>.indexKomunikatyData,
indexKomunikatyHoverLink:hover a {
  color: white !important;
}

.indexKomunikatyHover>.indexKomunikatyHoverA>.indexKomunikatyData,
.indexKomunikatyHover a {
  color: #0B3375;
}

<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 padding0 padding2 indexKomunikatyHover">
  <a href="http://localhost/Messages" class=" indexKomunikatyHoverLink">
    <div class="col-xs-12 col-sm-9 col-md-9 col-lg-9  ">
      <div class="indexKomunikatyTytul">xxxxx zzzzz
      </div>
    </div>
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3  indexKomunikatyHoverA">
      <div class="indexKomunikatyData ">19 października 2019</div>
    </div>
  </a>
</div>

如果光标悬停在字母上-背景颜色将更改，并且题词“ 19października2019”将更改为白色。很好。

字符串的背景颜色不变：xxxxx zzzzz。

如何解决？

普尔维耶夫：https://jsfiddle.net/q3awthku/

Answer 1

我的秘诀是不要使用如此长的选择器-您使可维护性变得更加困难，选择器的效率也大大降低，并且使其难以覆盖，这可能就是您使用{{1} }

!important

.indexKomunikatyHover a { /* original colour of anchors */
  color: #0B3375;
}

.indexKomunikatyHover:hover {  /* just change background on main div */
  background-color: #A92525;
  border-radius: 15px;
}

.indexKomunikatyHover:hover a { /* just change the colour on anchors when main div is hovered */
 color: white;
}