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（本）.mouseenter（函数（）{ 附加$ J（本）.addClass（ “盘旋”）; }）;

在CSS中：

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

移动到子菜单后，菜单会保持不变

1 个答案: