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

Question

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

• 让图像在悬停时带有边框，并在单击时保持边框。 （到目前为止，边框仍然存在，但它在表格单元格周围，而不是在图像周围。我不想为图像设置一个新类，因为我在 wordpress 中使用它并且不想弄乱模板以及已经为每个图像设置的类。我尝试使用 id，但只有 'td' 因为选择器对我有用）。
• 在悬停时显示“悬停内容”，但在单击时，该生物将成为默认生物，直到单击另一个图像为止。 （但在将鼠标悬停在其他图像上时仍然可以更改）

这是我迄今为止所取得的成就：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

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

并在每次点击时存储#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 将myClickState 类切换到图像，并将!important 添加到border: 3px solid #99888A 内myClickState 内的规则。

Answer 2

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

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