jQuery在单击时显示隐藏的热点？

我有一系列的div，每个div都有一个X的图像：

我想做的是先隐藏它们，但仍然可以单击，然后单击“显示内部图像”

如果我使用

<div class="hotspot" id="hs1" class="hotspot">
    <img class="x" src="images/xmark.png" alt="x">
</div>

.hotpsot img { visibility: hidden;}

div确实获得了单击，但图像未显示

---

我还尝试了display:none，children（）

将

img

括在引号中，以使用标记选择器获取元素，否则

img

将假定为变量。您没有正确关闭img标签，因为缺少

/

图像通过显示方法使用的

css

中的

visibility:hidden

隐藏，但show使用的是display属性not

visibility

使用

display:none

$('#hs1').click(function(){
    $(this).find('img').show();
});

---

将

img

括在引号中，以使用标记选择器获取元素，否则将假定

img

为变量。您没有正确关闭img标签，因为缺少

/

图像通过显示方法使用的

css

中的

visibility:hidden

隐藏，但show使用的是display属性not

visibility

使用

display:none

$('#hs1').click(function(){
    $(this).find('img').show();
});

试试这个：

$('#hs1').click(function(){
    $(this).find('img').show();
});

只是缺少

img

选择器周围的引号

还有一个建议。请删除下面HTML标记中的double

class

属性：

<div class="hotspot" id="hs1" class="hotspot">
    <img class="x" src="images/xmark.png" alt="x">
</div>

试试这个：

$('#hs1').click(function(){
    $(this).find('img').show();
});

只是缺少

img

选择器周围的引号

还有一个建议。请删除下面HTML标记中的double

class

属性：

<div class="hotspot" id="hs1" class="hotspot">
    <img class="x" src="images/xmark.png" alt="x">
</div>