Question

我有这段代码：

<style type="text/css"> 
.containerdiv { position:relative;width:100%;display:inline-block;} 
.image1 { position: absolute; top: 20px; left: 10px; }

</style>

<div class="containerdiv">

<image src="https://media.gettyimages.com/photos/perfect-wood-planks-background-picture-id523584249?b=1&amp;k=6&amp;m=523584249&amp;s=612x612&amp;w=0&amp;h=LJ8b5cbwCLJU7iZAPSbm5skekvf_Vy7RZbgACH6Ze8g=" style="border:none;position:absolute;width:612px;height:612px;"></iframe>

<img class="image1" border="0" src="http://2.bp.blogspot.com/-_RSqh-pRVbE/VYkvXSK0f3I/AAAAAAAAAIQ/efZ1rnXb-_g/s320/manchester-united-fc.png" alt="" width="350px" height="318px">


</div>

我想在足球俱乐部图像旁边添加简单的关闭按钮'x'（在图像后面的右上角），所以当我点击该关闭按钮时，足球俱乐部图像应该消失并隐藏。谢谢

Answer 1

在昨天发生的事情之后，我觉得有必要帮助一名曼联球迷...... https://jsfiddle.net/q724sb3o/10/

我改变了你的几个元素给它们ID而不是类，并添加了一个简单的按钮使图像消失（按钮也消失了）。

HTML

xsl:value-of

CSS

<div class="containerdiv">

<image src="https://media.gettyimages.com/photos/perfect-wood-planks-background-picture-id523584249?b=1&amp;k=6&amp;m=523584249&amp;s=612x612&amp;w=0&amp;h=LJ8b5cbwCLJU7iZAPSbm5skekvf_Vy7RZbgACH6Ze8g=" style="border:none;position:absolute;width:612px;height:612px;" />

<img id="image1" border="0" src="http://2.bp.blogspot.com/-_RSqh-pRVbE/VYkvXSK0f3I/AAAAAAAAAIQ/efZ1rnXb-_g/s320/manchester-united-fc.png" alt="" width="350px" height="318px" />
<span id="close" onClick="hideImg()">X</span>

</div>

JS

.containerdiv { position:relative;width:100%;display:inline-block;} 
#image1 { position: absolute; top: 20px; left: 10px; }
#close {position:absolute; top: 0px; left: 350px; font-size: 32px; cursor: pointer }

添加图像旁边的关闭按钮

1 个答案: