JQuery - изменить CSS одного DIV

0

У меня есть этот код HTML:

<div id="cont">
    <div class="us"></div>
    <div class="us"></div>
    <div class="us"></div>
</div>

и этот код JS:

$(".us").mouseenter(function() {
    $(this).animate({marginRight: "10px"}, "fast");
});

Проблема в том, что три элемента изменены. Я пробовал его без продолжения DIV и отлично работает, только один элемент изменен, но мне он нужен. Кроме того, я попытался предоставить одиночные идентификаторы для DIV, но продолжает терпеть неудачу.

  • 1
    «Не удается», как, когда у вас были идентификаторы на каждом div ?
  • 0
    или используйте .eq (indexNumberofElement)
Показать ещё 4 комментария
Теги:

5 ответов

0
Лучший ответ

Проблема здесь в вашем коде CSS, потому что элементы div действуют как блок вместе, вы увеличиваете весь контейнер, добавляя margin, а другие тоже занимают место. Вы можете добавить это, чтобы каждый div добавлял маржу:

.us {
  float:right;
  clear:right;
}

Ваша демонстрация http://jsfiddle.net/6H8f4/14/

Поделиться
  • 0
    Оно работает. Спасибо :)
6

Существует много способов выбрать один элемент.

//the first one
$(".us").first().mouseenter(function() {
    $(this).animate({marginRight: "10px"}, "fast");
});

//the second one
$(".us").eq(1).mouseenter(function() {
    $(this).animate({marginRight: "10px"}, "fast");
});

//the third one
$(".us:nth-child(3)").mouseenter(function() {
    $(this).animate({marginRight: "10px"}, "fast");
});
Поделиться
  • 0
    Не сработало :( Странно, если я дам ID одному из трех DIV и попробую с ним ($ ("# us1") вместо $ (". Us")), тоже не получится.
  • 0
    Можете ли вы поиграть со своим кодом? Это может быть проблемой CSS. Мне интересно, работает ли jquery, но css заставляет его выглядеть так, как будто это не так?
Показать ещё 1 комментарий
0

Попробуй это:

$(".us:first-child").mouseenter(function() {
    $(this).animate({marginRight: "10px"}, "fast");
});

или

$(".us:last-child").mouseenter(function() {
        $(this).animate({marginRight: "10px"}, "fast");
    });

или

$(".us:nth-child(index)").mouseenter(function() {
        $(this).animate({marginRight: "10px"}, "fast");
    });
Поделиться
0

это то, что вы хотели?

<div id="cont">
    <div class="us">asdfafsdf</div>
    <div class="us">343464</div>
    <div class="us">asdfdsfds</div>
</div>

JQuery

$('#cont').children(".us").each(function() {
    $(this).mouseenter(function() {
         $(this).animate({marginRight: "10px"}, "fast");
    });
});
Поделиться
0

сделал скрипку

$(".us").mouseenter(function() {
    $(this).animate({'margin-right': 100}, "fast");
});

$(".us").mouseout(function() {
    $(this).animate({'margin-right': 5}, "fast");
});

http://jsfiddle.net/QjL9J/1/

при использовании анимационных установок ints, поскольку значения будут делать их px по умолчанию

также свойства css должны находиться в '' в анимированном объекте и писать фактическое свойство (margin-right not marginRight)

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

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню