Question

请看这个小提琴http://jsfiddle.net/rabelais/Fzs7u/

我有缩略图和标题，当mouseover功能发生时切换。如何从最后悬停的缩略图中保留标题？我应该使用toggle以外的其他内容吗？也许针对css display规则？

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

Answer 1

由于你不想隐藏字幕，我的做法会有所不同：

http://jsfiddle.net/zZ6UJ/

<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'));
});

Answer 2

http://jsfiddle.net/Fzs7u/3/

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

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

鼠标输出功能完成后如何使切换标题停留？

2 个答案: