Почему jqery затирает свойство hover?

Question

[Sushkov]

Есть меню:

<nav id="menu" class="panel" role="navigation">
       <div class="search">
           <input type="text" placeholder="Type to search" class="form-control">
       </div>
        <ul>           
            <li><a href="#">Home</a>
                <ul class="ulsecond">
                <li><a href="#">Вложеность текст текст текст текст</a></li>
                </ul>
            </li>
            <li><a href="#">The Ballad of El Goodo</a></li>
            <li><a href="#">Thirteen</a></li>
            <li><a href="#">September Gurls</a></li>
            <li><a href="#">What's Going Ahn</a></li>
        </ul>
    </nav>

и его свойства:

.panel a {
    color: #fff;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
.panel a:hover {
    text-decoration: underline;
}

мне нужно выделить активный пункт меню, я сделал через jqery:

$('.panel a').each(function() {
                 $(this).click(function () {
                     $('.panel a').css("text-decoration","none")
                     $(this).css("text-decoration","underline")
                 });
            });

но после того как я нажму 1 раз на какую либо ссылку из меню то свойство .panel a:hover перестает работать. В чем дело? Как это можно исправить?

Answer 1

[ILE -Salim]

В css есть привилегии. Т.е если вы напишите у body например background: green; в файле css и напишите background: yellow; как атрибут тега, то у body цвет будет желтый, т.к он игнорирует те стили которые в файле css, потому что он увидел такое свойство в своем атрибуте, а атрибут находится ближе, соответственно привилегии у него больше. jQuery задает стили как атрибуты.
Решение:
написать background: green;!important;