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

Question

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

• 让图像在悬停时带有边框，并在点击时保持边框不变。 (截至目前，边框保留，但它围绕表格单元格，而不是围绕图像。我不想为图像设置一个新类，因为我在 wordpress 中使用它并且不想弄乱模板以及已经为每个图像设置的类。我尝试使用一个 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);
});

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

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 中。