How to apply class to a div in a repeater on hover of another div in the repeater

Question

I have a repeater containing the following:

<div id="undercover" class="Price">
<span class="Location">UNDERCOVER</span><br />
<asp:label runat="server" ID="lblUndercover" Text="Price" CssClass="PriceLabel" /></div>

... Some other stuff in the repeater, and then

<div id="containerUndercover">
<div class="BookButton">
<asp:LinkButton ID="btnBookUndercover" runat="server" CommandName="Undercover">BOOK</asp:LinkButton>
</div></div>

I need to apply an additional class to the "undercover" div when the "containerUndercover" div is hovered.

This is relatively simple when the div's are NOT in a repeater, with the following jQuery:

<script type="text/javascript">
$(function () {
    $('#containerUndercover').hover(function () {
        $('#undercover').addClass('PriceHover');
    }, function () {
        $('#undercover').removeClass('PriceHover');
    });
});

But, of course, I can't get this to apply to every "undercover" and "containerUndercover" div because they are repeated. I know what the problem is, but I can't find a solution to it.

I've tried adding runat="server" to the div's and then trying to get their id's with (eg) <%= containerUndercover.ClientID %> but that just throws an error and says "containerUndercover doesn't exist".

Is there a way to achieve this?

Answer 1

Slight modification of positioning controls on the page, but I've got something working. It means the hover function is applied to the whole 'ButtonLeft' div and not just the button area, but I think my client will be ok with that.

<div id="buttonLeft" class="ButtonLeft">
<asp:Panel runat="server" ID="pnlOutdoorPrice">
    <div id="outdoor" class="Price outdoor">
        <span class="Location">OUTDOOR</span><br />
        <asp:label runat="server" ID="lblOutdoor" Text="Price" CssClass="PriceLabel" />
    </div>
    <div id="containerOutdoor">
        <asp:Panel runat="server" ID="pnlOutdoorBookButton" Visible='<%# customFunctions.CheckinDateWithinSpecified(Convert.ToInt32(Eval("ProviderID")), this.txtCheckIn.Text) && customFunctions.CheckoutDateWithinSpecified(Convert.ToInt32(Eval("ProviderID")), this.txtCheckOut.Text)  %>'>
            <div class="BookButton">
                <asp:LinkButton ID="btnBookOutdoor" runat="server" CommandName="Outdoor">BOOK</asp:LinkButton>
            </div>
        </asp:Panel>
    </div>
</asp:Panel></div>

$(function () {
    $('.ButtonLeft').hover(function () {
        $(this).find('.outdoor').addClass('PriceHover');
    }, function () {
        $(this).find('.outdoor').removeClass('PriceHover');
    });
});