mouseover () mouseout () проблема добавления/удаления jQuery

похоже, что у вас есть javascript, работающий нормально, но это просто проблема с специфика ваших правил CSS, поэтому !important заставляет его работать.

вам просто нужно сделать ваши выделенные правила css более конкретными, чем не выделенные правила.

#someItem ul li { /* Specificity = 102 */
    border-color: white;
}

.highlight { /* Specificity = 10 -- not specific enough! */
    border-color: grey;    
}

#someItem ul li.highlight { /* Specificity = 112 -- this will work */
    border-color: grey;    
}

редактировать с дальнейшим объяснением:
Допустим, соответствующие части вашего HTML выглядят следующим образом:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

и у вас есть этот CSS:

#someItem ul li {
    border: 1px solid white;
}
.highlight {
    border-color: grey;
}

в настоящее время все элементы списка в ul на #someItem div будет иметь белую границу, и ничто не имеет класс highlight так что нет ничего серого.

С помощью любых средств, которые вы хотите (в вашем случае событие наведения в jQuery), вы добавляете класс к одному из элементов:

$(this).addClass('highlight'); 

HTML теперь будет выглядеть примерно так:

<div id="someItem">
    <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
    </ul>
</div>

до сих пор ваш Javascript и HTML работают нормально, но вы не видите серого граница! Проблема в вашем CSS. Когда браузер пытается решить, как стиль элемента, он смотрит на все различные селекторы, которые нацелены на элемент и стили, определенные в этих селекторах. Если есть два разных селектора, определяющих один и тот же стиль (в нашем случае цвет границы оспаривается), то он должен решить, какой стиль применять, а какой игнорировать. Он делает это с помощью того, что известно как "специфичность" - то есть насколько специфичен селектор. Как указано в HTML собака статья, он делает это, назначая значение каждой части вашего селектора, и тот, кто с самым высоким счетом выигрывает. По пунктам:

• селектор элементов (например: "ul", "li", "table") = 1 пункт
• селектор класса (например: ".выделять." ,"деятельный." ,"menu") = 10 баллов
• селектор id (например: "#someItem", "#mainContent") = 100 очков

есть еще несколько правил, например: ключевое слово !important а также inline Стайлз, но это не имеет отношения к делу... "урок." Единственное, что вы должны знать, это то, что если два селектора имеют одинаковую спецификацию, то один, определенный позже в файле, выигрывает.

возвращаясь к вашей проблеме, учитывая CSS, который у нас был раньше, мы можем понять, почему у него все еще нет серой границы:

#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points

как упоминалось ранее, решение заключается в создании более конкретного селектора:

#someItem ul li.highlight
   = id + element + element + class
   = 100 + 1 + 1 + 10
   = 112 points

и ответить на ваш вопрос в комментарии, Вам не нужно изменять какой-либо из ваших javascript или HTML, чтобы это работало. Если вы сломаете этот селектор, он скажет:

найдите элемент с идентификатором "someItem", внутри которого найдите элемент ul, а затем элемент li, на котором есть класс" highlight".

...а теперь, учитывая простоту .addClass() звонок, который вы сделали ранее,li удовлетворяет этим условиям, поэтому граница должна стать серой.