Добавление границы CSS при наведении и удаление ее в jQuery

Question

Я пытаюсь добавить класс в группу элементов всплывающего списка при наведении курсора, используя jQuery.

Я добавляю класс, а затем удаляю добавленное пространство из вновь вставленной границы, используя margin:-4px, поэтомучто пункты списка не перемещаются.

По крайней мере, это мое намерение.это не работает.Вот скрипка:

http://jsfiddle.net/NgXSc/1/

Обратите внимание, как элементы списка братьев и сестер перемещаются при наведении курсора.Предполагаемый результат - самый последний элемент списка, в котором после зависания ничего не движется.

Answer 1

margin: -4px не является относительным изменением к 19px.Он полностью заменяет его.

Выяснив, что отступ добавляет 4 пикселя к левому и правому краям, вы хотите вычесть 8 пикселей из поля и использовать margin-right: 11px для класса .over.При этом элементы списка остаются в исходном положении.

См. Изменение кода здесь: http://jsfiddle.net/NgXSc/21/

Answer 2

Ваша проблема с маржой вызвана тем, что, хотя вы изначально определяете маржу как margin-right: 19px, вы перезаписываете ее с помощью margin: -4px !important.

Кроме того, для этого не нужно использовать jQuery - просто используйте псевдокласс :hover CSS.

Я изменил ваш код для получения желаемых результатов:

HTML:

<nav id="cs-client-list">
    <ul>
        <li><a href="#">A</a></li>
        <li><a href="#">B</a></li>
        <li><a href="#">C</a></li>
        <li><a href="#">D</a></li>
    </ul>
</nav><!--end cs-client-list-->

CSS:

#cs-client-list { padding: 25px; }
#cs-client-list li {
    background: yellow;
    float:left;
    margin: 0 19px 0 0;}
#cs-client-list li a {
    text-indent: -99999px;
    width: 111px;
    height: 80px;
    border: 4px solid transparent; /* use page's background color (ie #fff) if you want the border to display outside the box */
    display: block; }
#cs-client-list li a:hover { border-color: #000; }

Предварительный просмотр: http://jsfiddle.net/Wexcode/NgXSc/26/

Answer 3

Не связывайтесь с отрицательными полями.Измените свой класс .over на

#cs-client-list li a.over{ border: 4px solid #000; width: 103px; }

. Это самый быстрый способ получить желаемый эффект без применения прозрачной границы к элементу без наведения li a elements.

Answer 4

Установите прозрачную границу (или установите border-color для background-color элемента) на элементе без наведения, равную ширине видимой границы на элементе с наведением.И удалите !important;это не обязательно, просто используйте специфику:

#cs-client-list li a{float:left;display:block;text-indent:-99999px;height:80px;background-color:yellow;width:111px; border: 4px solid transparent;}

#cs-client-list li a.over{border:4px solid #000;cursor:pointer;}

Обновлен JS Fiddle

Это не требует jQuery, даже в IE6 ...