单击时，永久更改内容；悬停时，短暂显示新内容

Question

我正在尝试设置功能以在网站上显示作者的简介。我想完成几件事：

让图像在悬停时显示有边框，并在单击时保持边框不变。（截至目前，边框仍然存在，但它位于 table 单元格周围，而不是图像周围。我不想为图像设置新的 class，因为我在 wordpress 中使用它并且不我不想弄乱模板和已经为每个图像设置的 classes。我尝试使用 id，但只有 'td' 因为选择器对我有用）。
"hover-content" 在鼠标悬停时出现，但在单击时，该简介将成为默认简介，直到单击另一张图片为止。（但悬停在其他图像上时仍会发生变化）

这是我到目前为止所取得的成就：https://jsfiddle.net/nsn3bpep/2/

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

我遇到的最大问题是单击并设置默认的悬停内容，以便在选择一张图像时显示。它似乎保留了之前点击最多然后悬停的内容，而不是之前点击最多的内容而忽略了任何悬停动作。

Answer 1

使用隐藏字段存储内容div 内容。 CSS 中的图像边框也使用 .myClickState img、.myHoverState img 选择器。检查下面的 fiddle 以获取解决方案 https://jsfiddle.net/nsn3bpep/5/

$("#content").html($(this).find("#hover-content").html());

Answer 2

您可以直接将 jquery 样式设置为图像（我知道这不是最佳做法）或更改 classes 的顺序。

并在每次单击时存储 #content 的值（删除 $(this).off('mouseleave');）：

var divContent = $("#content").html();
$("td").click(function () {
    $("#content").html($(this).find(".hover-content").html());
        $("img[class*='wp-image-']").removeClass('myClickState');
        $(this).find('img[class*="wp-image-"]').addClass('myClickState');    
    divContent = $("#content").html();
});

$("td").hover(function () {
    $("#content").html($(this).find(".hover-content").html());
}, function () {
    $("#content").html(divContent);
});

.hover-content {
    display: none;
}

 .container {
    display: inline;
}


td {
    background: transparent;
    padding: 0;
    text-align: center;
}
table {
    margin: 0;
    padding: 0;
}

img[class*="wp-image-"]:hover {
 display: block;
 margin: 1.2% auto 0;
 max-width: 98%;
 border: 3px solid #99888A;
}


img[class*="wp-image-"] {
 display: block;
 margin: 1.2% auto 0;
 max-width: 98%;
 border: 3px solid transparent;
}

.myClickState, .myHoverState {
    border: 3px solid #99888A !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr>
            <td>
                <img class="size-thumbnail wp-image-301" src="http://wesdeboer.com/files/2013/01/sample-4-150x150.jpg"  width="120" height="120" />
                <div class="hover-content">
<strong>image 1</strong>

                </div>
            </td>
            <td>
                <img class="size-thumbnail wp-image-300" src="http://wesdeboer.com/files/2013/01/sample-4-150x150.jpg" width="120" height="120" />
                <div class="hover-content">
<strong>image 2</strong>

                </div>
            </td>
            <td>
                <img class="size-thumbnail wp-image-302" src="http://wesdeboer.com/files/2013/01/sample-4-150x150.jpg"  width="120" height="120" />
                <div class="hover-content">
<strong>image 3</strong>

                </div>
            </td>
            <td>
                <img class="size-thumbnail wp-image-414" src="http://wesdeboer.com/files/2013/01/sample-4-150x150.jpg"  width="120" height="120" />
                <div class="hover-content">
<strong>image 4</strong> 
                </div>
            </td>
        </tr>
    </tbody>
</table>
<div id="content"></div>

EDITS 将class myClickState 切换到图像，并在 border: 3px solid #99888A 内的规则 border: 3px solid #99888A 中添加 !important 15=].

单击时，永久更改内容；悬停时，短暂显示新内容

On click, change content permanently; on hover, display new content briefly

html

javascript

css

jquery

hover