我试图将跨度隐藏在另一个跨度下,当有人点击最上面的跨度时,它应该消失并显示其下方的内容。
我的 HTML:
<span id="couponCode" style="display:inline-block;border:2px dashed;padding:5px;margin:5px;background:#EE4000;color:white;height:20px;text-align:center;">{{ i.couponCode }}</span><span class="cTs">Click to see code</span>
我的 CSS:
.cTs
{
left :0px;
padding:10px;
height:50px;
color:white;
width: 100px;
position: relative;
background: black;
}
但我无法将其定位在第一个跨度上...而是它出现在第一个跨度的右侧...有人可以帮助我吗...
最佳答案
将元素包装在 position: relative;
容器中,然后将 position: absolute;
与 top
和 left< 一起使用
内部元素的值
div {
position: relative;
}
div span {
position: absolute;
top: 0;
}
div span:nth-of-type(1) {
z-index: 1;
}
div span:nth-of-type(2) {
top: 10px;
left: 25px;
}
使用 onclick
事件
关于html - 点击显示跨度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16890548/