CSS & jQuery does not update correctly?

Question

I am trying to create a menu using div's but for some reason I cannot achieve the effect I am looking for. I want to change the background of a menu item on hover but also change another div on the menu to another. So far I can get the hover working and selection but once I select another element the selected one does not change its style unless I hover over it first.

My 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");
    });
});

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

My 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;
}

Essentially I have a rectangle with text and a color accent on the left when not selected or hovered on the rectangle is just grey if hovered on the accent changes color and when selected that item stays accented with that color when another item is selected the previously selected item is just gray and the new item has the color accent. I hope this makes sense. Any help will be appreciated.

Thank You!

Answer 1

There are two main reasons why this line in the click handler doesn't work:

$(this).find(".appmenu-accent").removeClass("appmenu-accent")
                               .addClass("appmenu-accent-selected");

1. The class appmenu-accent-selected that you add does not appear in your CSS.
2. $(this).find(".appmenu-accent") doesn't find any elements because in your .hover() handler you actually remove the appmenu-accent class (and obviously the item you are clicking is the one you're hovered over).

So obviously you can fix point (1) by adding the class to your CSS. My suggestion for fixing point (2) is to not ever remove the appmenu-accent class, but make sure it appears before the appmenu-accent-selected and appmenu-item-item1-accent classes in your stylesheet so that it will have a lower priority than them. Then you can simplify the code a bit:

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

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

Demo: http://jsfiddle.net/NVa3d/1/