你好，我有一个简单的div水平线cnt，包含许多项目，我想要的是改变颜色的圆圈内，也是文字颜色时，鼠标悬停，这应该很容易，但我找不到什么是失踪，控制台没有显示任何错误，我试着在函数的末尾加了一个警告，它在发出警告，但是圆圈的背景没有变，所以文本的颜色也没有变，有人能告诉我，我的代码出了什么问题吗？

<div class="horizontal-line-cnt">
        <div class="horizontal-line"></div>
        <div class="items-cnt">
            <div class="item">
                <div class="year">
                    <p>
                        2006
                    </p>
                </div>
                <div class="circle"></div>
                <div class="text">
                    <p>
                        الفكرة والتخطيط
                    </p>
                </div>
            </div>

            <div class="item">
                <div class="year">
                    <p>
                        2006
                    </p>
                </div>
                <div class="circle"></div>
                <div class="text">
                    <p>
                        الفكرة والتخطيط
                    </p>
                </div>
            </div>

            <div class="item">
                <div class="year">
                    <p>
                        2006
                    </p>
                </div>
                <div class="circle"></div>
                <div class="text">
                    <p>
                        الفكرة والتخطيط
                    </p>
                </div>
            </div>

            <div class="item">
                <div class="year">
                    <p>
                        2006
                    </p>
                </div>
                <div class="circle"></div>
                <div class="text">
                    <p>
                        الفكرة والتخطيط
                    </p>
                </div>
            </div>
        </div>
    </div>

以及CSS：

`.horizontal-line-cnt {
    width: 90%;
    max-width: 1200px;
    margin: 100px auto;
}

.horizontal-line {
    width: 100%;
    height: 5px;
    background-color: rgb(230, 226, 226);
    border-radius: 2.5px;
}

.horizontal-line-cnt .items-cnt {
    display: flex;
    flex-wrap: wrap;
    background-color: #fff;
}

.horizontal-line-cnt .items-cnt .item {
    width: 25%;
    height: 300px;
    text-align: center;
    font-weight: bold;
    margin-top: -65px;
}

.item p {
    margin: 0;
    padding: 0;
    color:rgb(177, 175, 175);
    transition: all 0.2s;
}

.item .year p {
    color: #000;
}

.horizontal-line-cnt .item .circle {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: rgb(230, 226, 226);
    transition:all 0.2s;
    margin: 20px auto;
    z-index: 10;
}

.item .colored-circle{
    background-color: #cb8c33;
}

.black-text {
    color: #000;
}
`

最后是jquery：

`$('.item').hover(function () {
    $(this).find($('.circle')).toggleClass('colored-circle');
    $(this).find($('.text p')).toggleClass('black-text');
    alert('finished')
})`

当然，问题不在于调用JQuery库，因为我有其他JQuery函数在同一页面中正常工作。
我尝试在函数结束时发出警报，以检查代码是否工作，直到结束，是的，它工作，我还尝试提醒目标元素，它正确地发出警报，当我使用devTools检查代码时，类在鼠标悬停时正常添加，但样式没有任何变化。