Question

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

悬停时图像会显示边框，并在点击时保持边框。（截至目前，边界仍然存在，但是它位于表格单元周围，而不是图像周围。我不想为图像设置新的类，因为我在wordpress中使用它并且不要想要弄乱模板和已经为每个图像设置的类。我尝试使用id，但只有＆＃39; td＆＃39;因为选择器对我有效。）
有＆＃34;悬停内容＆＃34;在悬停时出现，但点击后，该bio将成为在单击另一个图像之前显示的默认生物。（但是当悬停在其他图像上时仍然可以改变）

这是我迄今为止所取得的成就：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选择器作为图像边框。检查下面的小提示以获得解决方 https://jsfiddle.net/nsn3bpep/5/

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

Answer 2

您可以直接使用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>

编辑将课程myClickState切换到图片，然后将!important添加到border: 3px solid #99888A内的规则myClickState。

点击后，永久更改内容;在悬停时，简要显示新内容

2 个答案: