在悬停/单击时显示/隐藏内容答案

【问题标题】：Show/hide content on hover/click在悬停/单击时显示/隐藏内容
【发布时间】：2018-10-15 02:40:50
【问题描述】：

试图在图像悬停时显示/隐藏内容。这工作正常，但希望默认显示第一张图片下的内容。我怎样才能做到这一点？

    var divContent = $("#content").html();
    $("td").click(function () {
    $("#content").html($(this).find("#hover-content").html());
    $("td").removeClass('myClickState');
    $(this).addClass('myClickState');
    $(this).off('mouseleave');
   });
    $("td").hover(function () {
    $("#content").html($(this).find("#hover-content").html());
    }, function () {
    $("#content").html(divContent);
});

【问题讨论】：

它已经显示在第一张图片下面了？
你想在各自的图片下显示每个内容吗？

标签： jquery hover click show-hide

【解决方案1】：

由于您在第一张图片下显示内容，我假设您需要每张图片下的内容。在这里，我将 id hover-content 更改为一个类。

$("td").hover(function () {
    $(this).find('.hover-content').show();
}, function(){
    $(this).find('.hover-content').hide();
});

您可以在此处查看fiddle。

【讨论】：

【解决方案2】：

只需在你的 jquery 脚本下面添加这一行，你就完成了......

$(document).ready(function(){
    $('tr:first-child>td:first-child>img.size-thumbnail').click()
});

【讨论】：