如何在鼠标退出功能完成后使切换的标题保留

how to make toggled title stay after mouse out function is complete?

本文关键字：保留 标题 鼠标 退出 功能      更新时间：2023-09-26

请参阅此页http://jsfiddle.net/rabelais/Fzs7u/

我有缩略图和标题切换时，mouseover功能发生。我如何使标题保持从最后一个悬停缩略图?我应该使用toggle以外的东西吗?也许针对css display规则?

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

既然您不想隐藏标题，那么我将使用稍微不同的方法:

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

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

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

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

相关文章：