Javascript 移动到子菜单后，使菜单保持悬停状态

我用css和js代码制作了一个菜单，使图像和文本在悬停在菜单部分时显示，但我还需要让菜单的颜色在我悬停后保持不变

以下是网站：

以下是css和js代码：

.product-block-botton {
    border-right:#ffffff solid 1px;
    text-align:center;
    vertical-align:middle;
    font-size:16px;
    padding:5px;
    height:30px;
    color:#ffffff;
}
.product-block-botton:hover {
    color:#000000;
}
.last-button {
    border:none;
}
.type1 {
    background-color:#B83E6C;
    cursor:pointer;
    width:25%;
}

HTML

JS

我希望我已经说清楚了，并提前表示感谢。

使用： $jthis.mouseenterfunction{ $jthis.addClass悬停； };

在CSS中：

.product-block-botton.hovered {
   color:#000000;
 }

---

什么意思你需要在你悬停后保持颜色？你想让最初的链接保持白色吗？嗨，罗曼，谢谢你的回复，我的意思是我希望手机在相关照片显示期间保持高亮显示。因此，访问者对分类毫无疑问。你可以定义两个函数$this.hover函数{…}，函数{…}Hi Romain，请查看网站，查看幻灯片后的菜单栏。Hi-Atal，谢谢你的回复，你的意思是我可以从函数中删除。hover没有任何问题吗？Hi Rajiv007，感谢您编辑我的问题，感谢您的回复，但不幸的是，在使用后。将鼠标悬停在outUse mouseenter（而不是我使用的鼠标悬停）后，鼠标悬停后仍然没有保持黑色。产品块botton:mouseenter{color:000000；}，然后它在悬停时根本没有改变颜色，我添加了js：$jthis.mouseenterfunction{$jthis.addClasshovered；}；你知道这是为什么吗？你必须弄清楚你需要什么

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(document).ready(function(e) {
        $j('.product-block-botton').each(function(index, element) {
            $j(this).hover(function(){
                $j('.categories').hide();
                $j('.categories').eq(index).show();
            });
        });
    });
</script>

.product-block-botton.hovered {
   color:#000000;
 }