Question

我有以下HTML：

<input id="A1" type="radio" name="A">
<label for="A1">A1
<div class="menu" id="menu1">   
    <img class="button" id="edit1" src="Aa.png">
    <img class="button" id="remove1" src="Ab.png">
</div>
</label>

<input id="A2" type="radio" name="A">
<label for="A2">A2
<div class="menu" id="menu2">   
    <img class="button" id="edit2" src="Aa.png">
    <img class="button" id="remove2" src="Ab.png">
</div>
</label>

我正在尝试将鼠标悬停在标签上时显示每个标签的菜单。例如：当悬停在A1上时，应显示menu1。

我尝试播放以下代码：

$("label").hover(
  function() {
    $("this").next(".menu").css( "display", "inline-block" );
  }
);

我尝试选择带有“儿童”，“下一个”，“下一个”的菜单，没有运气。

Answer 1

.menu元素不是label之后的 next 元素（兄弟），它是子元素。所以你想要children（或find，如果它可能更深），而不是next：

$("label").hover(
  function() {
    $(this).children(".menu").css( "display", "inline-block" );
  }
);

Answer 2

在这里，您使用this作为字符串，但它是参考，菜单是label的子项所以试试这样。

$(this).children(".menu").css( "display", "inline-block" );

Answer 3

正如@Mohammad所说，它应该是这个，而不是＆＃34;这个＆＃34;。另外，我应该使用儿童，正如@Era所说。

jQuery，找到带id的下一个元素

3 个答案: