Javascript 鼠标退出功能完成后，如何使切换的标题保持不变？

请看这把小提琴

我有缩略图和标题，当出现

鼠标悬停

功能时可以切换。如何使标题保留在上次悬停的缩略图上？我是否应该使用

切换之外的其他功能

？可能是针对css

display

规则

$(".thumbnail-wrapper").on("mouseover mouseout", "img", function () {
  $("#" + $(this).data("title")).toggle();
});

---

既然你不想隐藏标题，我会做一些不同的事情：

---

---

我将您的.toggle（）更改为.show（），并在鼠标上方隐藏了.title，以确保一次只显示一个标题。还删除了mouseout处理程序。

这种方法的缺点是，除了一行未格式化的文本外，无法显示任何内容。对于任何更复杂的内容，我都会修改原来的fiddle，就像我发布的示例一样。@Steve html也可以工作：，当然你可能不想在这样的属性中包含超复杂的html。这两个答案都可以，但我喜欢这个解决方案。虽然它确实与最初的帖子略有不同，但最终代码变得更加清晰。让这些DIV中的每一个单独呈现，闻起来很有趣。使用一个DIV作为模板（而不是多个），并将数据加载到其中，可以根据选择应用样式。谢谢，有没有办法在用户开始悬停之前先显示其中一个标题？重新选择visible/Current Showed元素会使代码简洁/简短，但这样做可能会降低性能，但是我们可以将上下文限制在visible元素的容器中，这样就不会有任何值得注意的问题。

<div class="editable title" id="title">
</div>

<div class="thumbnail-wrapper repeatable">
    <img src="http://intelligen.info/images/LFW Live Show Drawings/Vivienne Westwood/2013/img012_2.jpg" alt="1" data-title="Vivienne Westwood"/>
</div>
<div class="thumbnail-wrapper repeatable">
    <img src="http://intelligen.info/images/LFW Live Show Drawings/Vivienne Westwood/2013/img013_3.jpg" alt="2" data-title="Paul Smith"/>
</div>

$(".thumbnail-wrapper").on("mouseover", "img", function () {
    $("#title").text($(this).data('title'));
});

$(".thumbnail-wrapper").on("mouseover", "img", function () {
  $('.title:visible').hide();
  $("#" + $(this).data("title")).show();
});