jQuery: Selector inconsistencies, can someone please explain what i'm doing wrong here

Why does this work:

    $("div.cat_rollout").mouseover(function(){
    $(this ).removeClass().addClass("cat_rollover");
    $(this).animate({ fontSize: "22px" }, 'fast' );
}).mouseout(function(){
    $(this).removeClass().addClass("cat_rollout");  
    $(this).animate({ fontSize: "10px" }, 'fast' );
}); 

But this does not:

    $('.vpMedia').click(function() {

    var selectedBT1 = $(this).find(".vpLeft");
    selectedBT1.removeClass();
    selectedBT1.addClass("vpLeft_Selected"); //doesn't work

    var selectedBT2 = $(this).find(".vpLeftText"); 
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected"); //doesn't work

    $(this).find(".vpArrow").css("visibility", "visible"); //works
});

The only difference is that I'm referencing a child through find.

If i do the above code but change:

        var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected");

To just changing CSS:

        var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.css("color", "#f00");

It works. So it has something to do with me doing a double jquery (removeClass and addClass)

Here is some html:

<div class="vpWrapper">
    <div class="vpMedia">
        <a href="1.mp4" bitly="BITLY_PROCESSED">
            <div class="vpArrow" style="visibility: visible; ">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText_Selected">Blah</div>
                <div class="vpLeft_Selected"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="1-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="2.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText" style="color: rgb(170, 170, 170); ">Blah</div>
                <div class="vpLeft" style="opacity: 0; "></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="2-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="3.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow" style="visibility: visible; ">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText_Selected" style="color: rgb(0, 204, 0); ">Blah</div>
                <div class="vpLeft_Selected" style="opacity: 0.2; "></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="3-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="4.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="4-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="5.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="5-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="6.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="6-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
    <div class="vpMedia">
        <a href="7.jpg" bitly="BITLY_PROCESSED">
            <div class="vpArrow">
                <img src="vpArrow.png" width="12" height="14">
            </div>
            <div class="vpLeftWrapper">
                <div class="vpLeftText">Blah</div>
                <div class="vpLeft"></div>
            </div>
            <div class="vpRight">
                <div class="vpRightImg">
                    <img src="7-preview.png" width="137" height="77">
                </div>
            </div>
        </a>
    </div>
</div>

Edit: As requested, the CSS

.vpWrapper {
    width:286px;
    overflow-x: visible;
}

.vpMedia {
    margin: 0;
    padding: 0;
    background-color: fuchsia;
}

.vpArrow {
    height: 69px;
    width:12px;
    padding-top: 8px;
    float: left;
    visibility: hidden;
}

.vpLeftWrapper {
    position: relative;
    float: left;
    background-color: white;
    width:137px;
    height: 77px;
}
.vpLeft {
    position: absolute;
    top:0;
    left: 0;
    z-index: 788;
    float: left;
    background-color: #00cc00;
    width:121px;
    height: 61px;
    padding: 8px;   
    -moz-opacity:0;
    -ms-filter:'alpha(opacity=0)';
    filter:alpha(opacity=0);
    opacity:0;
}

.vpLeft_Selected {
    position: absolute;
    top:0;
    left: 0;
    z-index: 788;
    float: left;
    background-color: #00cc00;
    width:121px;
    height: 61px;
    padding: 8px;   
}

.vpLeftText {
    position: absolute;
    top:0;
  开发者_开发技巧  left: 0;
    z-index: 789;
    width:121px;
    height: 61px;
    padding: 8px;   
}

    .vpLeftText_Selected {
        position: absolute;
        top:0;
        left: 0;
        z-index: 789;
        width:121px;
        height: 61px;
        padding: 8px;
        color: white;
    }

I used Chrome's Developer Tools to test your code, and the class is getting added correctly. That makes me think there is a problem with your css class definitions. What do those look like? It worked fully when I tested it with this css:

.vpLeftText_Selected {color:#0f0;}

It turns out that the hover function is clashing with the click. But actually only with the removeClass().addClass() lines(?) The .css() part works.

How can I get around this elegantly?

    $('.vpMedia').hover(function() {
    $(this).find(".vpLeft").css("opacity" , "0.2");
    $(this).find(".vpLeftText").css("color" , "#00cc00");
    },
    function() { //mouseout
    $(this).find(".vpLeft").css("opacity" , "0");
    $(this).find(".vpLeftText").css("color" , "#aaa");
});

$('.vpMedia').click(function() {

    var selectedBT1 = $(this).find(".vpLeft");
    selectedBT1.removeClass();
    selectedBT1.addClass("vpLeft_Selected"); //if i remove the hover function above, this works.

    var selectedBT2 = $(this).find(".vpLeftText");
    selectedBT2.removeClass();
    selectedBT2.addClass("vpLeftText_Selected");//if i remove the hover function above, this works.

    $(this).find(".vpArrow").css("visibility", "visible");//but this works regardless?!
});