悬停CSS的问题

Question

我遇到了悬停css的问题。

班级中的文字在我悬停在图片上时不会改变颜色，但在单词上的流量时会发生变化。

我想在悬停在图片上时进行颜色更改，因为图片的背景与原始字体颜色相同。

HTML

<li class="category-location">
    <div id="category-location-table">
        <div class="category-location-row">
            <div class="category-location-description">
                <h3><a href="/admin">description</a></h3>
            </div>
        </div>
    </div>
</li>

CSS

ul.subcategories-location{
    float :right;
    list-style: none;
    margin: 0;
}
ul.subcategories-location li{
    float :right;
    display: inline-block;
    margin-left: 10px;
    margin-bottom: 30px;
    width: 230px;
    vertical-align: top;
}
ul.subcategories-location li h3 a{
    font-family: @fancyFont;
    font-size: 17px;
    font-weight: normal;
}

#category-location-table{
    color:#F7A51E;
    margin-left: 65px;
    background: url('design/img/category-itmes-1.png') no-repeat;
    height:60px;
    width:230px;
    display: table;
    display: table-row;
    float :right;
}   
#category-location-table a{
    color:#A20734;
}   
#category-location-table a:hover{
    color:#fff;
}   
#category-location-table :hover{
    background: url('design/img/category-itmes-2.png') no-repeat;
    height:60px;
    width:230px;
    color:#fff;
}   

我希望这是有道理的，有人可以提供帮助。

Answer 1

最后一行有拼写错误。 #category-location-table：悬停不＃category-location - 表：悬停。

Answer 2

是 like this 吗？

#category-location-table:hover .category-location-description a {
  color: #fff;
}