jquery - CSSとjQueryが正しく更新されませんか？

Question

divを使用してメニューを作成しようとしていますが、何らかの理由で、探している効果が得られません。ホバー時にメニュー項目の背景を変更したいが、メニューの別のdivを別のdivに変更したい。これまでのところ、ホバーを機能させて選択することはできますが、別の要素を選択すると、最初にホバーしない限り、選択した要素のスタイルは変更されません。

私のJS：

$(document).ready(function () {

    $(".collapsebar").click(function () {
        $("#body").toggleClass("use-appmenu");
    });

    $(".appmenu-item").click(function () {
        $(".appmenu-accent-selected").removeClass("appmenu-accent-selected").addClass("appmenu-accent");
        $(this).find(".appmenu-accent").removeClass("appmenu-accent").addClass("appmenu-accent-selected");
    });

    $(".appmenu-item").hover(function () {
        $(this).addClass("appmenu-item-hover");
        $(this).find(".appmenu-accent").removeClass("appmenu-accent").addClass("appmenu-item-item1-accent");
    },
    function () {
        $(this).removeClass("appmenu-item-hover");
        $(this).find(".appmenu-item-item1-accent").removeClass("appmenu-item-item1-accent").addClass("appmenu-accent");
    });
});

私のHTML：

<div class="appmenu-item appmenu-item-item1">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 1</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item2">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 2</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item3">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 3</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item4">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 4</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item5">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 5</div>
    <div style="clear: both;"></div>
</div>
<div class="appmenu-item appmenu-item-item6">
    <div class="appmenu-accent float-left"></div>
    <div class="appmenu-text float-left">Item 6</div>
    <div style="clear: both;"></div>
</div>

私のCSS：

.appmenu-item
{
    cursor: pointer;
}

div.appmenu-item-item1-accent
{
    width: 4px;
    height: 40px;
    background-color: #FF0000;
}

div.appmenu-accent
{
    width: 4px;
    height: 40px;
    background-color: #F26D47;
}

基本的に、テキスト付きの長方形があり、選択されていない場合、または長方形にカーソルを合わせると、左側に色のアクセントが表示されます。アクセントにカーソルを合わせると色が変わり、選択すると、そのアイテムは、前に選択した別のアイテムを選択したときに、その色でアクセントが付けられたままになります。アイテムはちょうど灰色で、新しいアイテムは色のアクセントを持っています。これが理にかなっていることを願っています。どんな助けでもありがたいです。

ありがとう！