Question

<div id="item">
    <div class="action">
        Oh! Look, a squashed pea!
    </div>
    <img class="picture" src="example">
</div>

使用jQuery，当将鼠标悬停在图像上时，我需要使用类名为“action”的DIV。悬停部分我已经拍了下来并且工作正常，但我正在努力选择部分。

我已经尝试选择父母，然后选择“行动”课程，没有运气......

编辑：更多信息我应该添加但是笨拙并没有试图让它更容易阅读 - 我的不好。

<div id="item"> 
    <div class="action"> 
        <span>Oh! Look, a squashed pea!</span>
        <button id="add">Hello</button>
    </div> 
    <img class="picture" src="example"> 
</div>

我仍在使用.action类引用DIV之后，没有引用任何ID。

Answer 1

您可以使用.prev()来获取上一个兄弟姐妹。在您的悬停功能中，它将是：

$(this).prev();

Answer 2

$("#item img")
    .on("mouseover", function(){
    var prevAction = $(this).prev();
    prevAction
        .css("background-color","red");
});

我们使用prev()来选择前一个元素。（然后我们继续将其背景颜色设置为红色，但这是您更改的部分）。在这种情况下，您要选择的元素存储在变量prevAction。

中

编辑：为了您的更新：

$("img.picture")
    .on("mouseover", function(){
    var prevAction = $(this).prev();
    prevAction
        .css("background-color","red");
});

我们选择带有item类的图片，而不是选择ID为picture的div中的图片。如果您的图像在#item个div之外具有相同的类，则可能与其他元素冲突。在这种情况下，您可以可能使选择器更具体：

$("div img.picture")

这将选择任何picture元素内的div类图像（无论是id还是类）。

jQuery：选择兄弟姐妹

2 个答案: