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

Please see this fiddle http://jsfiddle.net/rabelais/Fzs7u/

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

I have thumbnails and titles that toggle when a mouseover function occurs. How can I make the title remain from the last hovered thumbnail? Should I use something other than toggle? Perhaps target the css display rule?

我有缩略图和标题,当鼠标悬停功能发生时切换。如何使标题保留在最后悬停的缩略图中?我应该使用除切换之外的其他东西吗?也许针对css显示规则?

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

2 个解决方案

#1

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

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

I changed your .toggle() to .show(), and hid .title on mouseover, to make sure that only one title is displayed at a time. Also removed your mouseout handler.

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

#2

Since you don't want to hide the caption, I'd do things a little differently:

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

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

#1