Question

我第一次写得很糟糕。抱歉。订正：

每个元素都有一个ID，但我事先不知道它会是什么。我需要的是将鼠标悬停在每个div上以仅替换其自己的列表项，即。将鼠标悬停在#1上会#1 .second替换#1 .first，但不会#2 .second替换#2 .first。

这里有我影响两个div的内容：

<div class="hover" id="1">
  <ul>
    <li class="first">First</li>
    <li class="second">Second</li>
  </ul>
</div>

<div class="hover" id="2">
  <ul>
    <li class="first">First</li>
    <li class="second">Second</li>
  </ul>
</div>

$(document).ready(function() {
    $(".hover").mouseenter(function() {
        $(".second").show();
        $(".first").hide();
    }).mouseleave(function() {
        $(".second").hide();
        $(".first").show();
    });
});

.second {display:none;}

https://jsfiddle.net/L50bm2vp/

Answer 1

试试这个：

定位每个span1课程并显示/隐藏其下一个span2课程

$(document).ready(function() {
    $("div .span1").mouseenter(function() {
        $(this).hide().next('.span2').show();

    }).mouseleave(function() {
        $(this).show().next('.span2').hide();
    });
});

<强>更新

根据您修改后的帖子，您可以执行以下操作：

<强> DEMO

$(document).ready(function() {
    $(".hover").mouseenter(function() {
        $(this).find(".second,.first").toggle();
    }).mouseleave(function() {
        $(this).find(".second,.first").toggle();
    });
});

你只是缺少目标你正在做的元素 hover可以通过$(this)
进行定位来完成

Answer 2

这是你想要的吗？

$(document).ready(function() {
    $(".hover").mouseenter(function() {
        $(this).find(".second").show();
        $(this).find(".first").hide();
    }).mouseleave(function() {
        $(this).find(".second").hide();
        $(this).find(".first").show();
    });
});

如何在不知道ID的情况下单独替换元素？

2 个答案: