移到子菜单后使菜单停留在悬停状态

Question

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

以下是网站：http://www.cabas-durables.fr/magento/index.php/accueil.html

下面是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

<table class="product-block">
<tr>
    <td colspan="4" class="product-block-head">CHOISISSEZ VOTRE SAC
    </td>
</tr>
<tr>
    <td class="product-block-botton type1">Sac Papier Luxe</td>
    <td class="product-block-botton type1">Sac Poignées Torsadées</td>
    <td class="product-block-botton type1">Sac Poignées Plates</td>
    <td class="product-block-botton last-button type1">Sac Réutilisable</td>
</tr>
</table>

JS

<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>

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

Answer 1

用法：$j(This).mouseenter(.mouseenter(){ $j(this).addClass("hovered")；})；

在CSS中：

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