jQuery - 更改单个DIV的CSS

Question

我有这个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");
});

问题是三个要素都改变了.我尝试了它没有cont DIV并且工作完美,只有一个元素被改变,但我需要它.此外,我尝试向DIV提供单个ID,但仍然失败.

Answer 1

您可以通过多种方式选择一个项目.

//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");
});