Неопределенная переменная при наведении

У меня есть два списка. Когда я нахожусь на Томе в одном списке, я хочу, чтобы описание о нем было красным, поэтому я добавил класс зависания, как показано ниже. Проблема, с которой я сталкиваюсь, заключается в том, что я не могу удалить состояние зависания, поскольку получаю undefined, когда я покидаю состояние зависания. Я прокомментировал несколько вещей, которые я пробовал до сих пор. Есть ли способ узнать значение id или удалить любой класс с именем hover на странице, когда я покидаю зависание?

    <ul id="one-list">
        <li id="u11">Tom</li>
        <li id="u22">Jerry</li>
    </ul>

    <ul id="another-list">
        <li id="a11">Tom is 22 years old</li>
        <li id="a22">Jerry is 18 years old</li>
    </ul>

    $("#one-list li").hover(

    function () {
        var id = jQuery(this).attr('id') || '';
        id = id.replace(/u/, '');
        $('#another-list #a' + id ).addClass("hover");
    }, function () {
        //$('body').removeClass("hover");
        //$('#another-list #a' + id ).removeClass("hover");
    }
    );

    .hover {
        color:red;
    }