How to change styles of several child divs of a div?

Question

I'm making a navigation and I don't want to use CSS3 to make gradient background instead of that i use images. But buttons has corners so my button is made from 3 images to make its size proportional to text. I am trying to change background on hover and I need to change all 3 backgrounds: left, right and mid. I tried jquery but it doesn't seem to work..

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(function(){
    $('.topnavbtn').mouseenter(function(){
        $(this).$('.left').css('background','url(images/nav/images/navLeft_on.png) no-repeat');
        $(this).$('.mid').css('background','url(images/nav/images/navBg_on.png) no-repeat');
        $(this).$('.right').css('background','url(images/nav/images/navRight_on.png) no-repeat');
    }).mouseout(function(){
        $(this).$('.left').css('background','url(images/nav/images/navLeft.png) no-repeat');
        $(this).$('.mid').css('background','url(images/nav/images/navBg.png) no-repeat');
        $(this).$('.right').css('background','url(images/nav/images/navRight.png) no-repeat');
    });
});
</script>

HTML:

<ul style="list-style-type: none; margin:0; padding:0;padding:10px;">
<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>

<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>

<li>
<a href="#">
<div class="topnavbtn">
<div class="left"></div>
<div class="mid">asdassdfdssdfsd</div>
<div class="right"></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
</a>
</li>

</ul>

And CSS:

.topnavbtn {
    height:34px;
    float:left;
    display:inline-block;
    margin:7px;
    font-weight:bold;
    text-transform:uppercase;
    color:#FFF;
    line-height: 34px;
}

.topnavbtn .left {
    height:34px;
    width:9px;
    background:url(images/nav/images/navLeft.png) no-repeat;
    float:left;
    display:inline-block;
}

.topnavbtn .right {
    height:34px;
    width:9px;
    background:url(images/nav/images/navRight.png) no-repeat;
    float:left;
    display:inline-block;
}

.topnavbtn .mid {
    background:url(images/nav/images/navBg.png) repeat-x;
    height:34px;
    width:auto;
    float:left;
    display:inline-block;
}

Answer 1

This is a syntax error :

$(this).$('.left').css(...

try

$('.left', this).css(...

Answer 2

Just replace

$(this).$('.left')

with

$(this).children('.left')

and so on for rest of classes .