html - div鼠标点击显示不工作

Question

我想隐藏div直到用户点击它然后它应该被显示。

HTML

<div class="cTsdiv"><a href="/{{ i.couponStoreURL }}/#{{ i.id }}">
<span id="couponCode" style="">{{ i.couponCode }}</span></a>
<span class="cTs">Click to see the code</span></div><br><br>

CSS

.cTsdiv {
    height:50px;
    width: 175px;
    position: relative;
    display:inline-block;
    border:1px dashed;
    padding:5px;
    margin:5px;
    background:#EE4000;
    color:white;
    height:20px;
    text-align:center;
}

.cTs {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0;
    height:30px;
    width: 185px;
    line-height:4em;
    background: black;
    visibility: visible;
    position: absolute;
    -webkit-transition: visibility opacity 0.1s;
}

.cTsdiv:hover .cTs {
    opacity:1;
    color:white;
    visibility: hidden;
}

.cTsdiv a {
    font-color:white;
    text-decoration:none;
}

Answer 1

根据您的 CSS/HTML，您需要涉及一些 Javascript。

$('.cTs').on("click", function() {
    $(this).css("opacity", 0).delay(100).queue(function() {
        $(this).css("display", "none");
    });
});

延迟/队列在那里使脚本等到您的动画完成后再span隐藏。有一种正确的方法可以做到这一点，但现在就可以了。

像这样的东西？http://jsfiddle.net/ninty9notout/3EMv2/

Answer 2

尝试这个

$(document).ready(function(){
$('.cTsdiv a').click(function() {
    $(this).next('.cTs').fadeIn();
    return false;
});
});

我也编辑了你的一些 CSS

jsfiddle 文件

Answer 3

您的问题的一种解决方案可能是这样的

.cTsdiv:hover .cTs {
opacity:1;
color:white;
display:none;
}
.cTsdiv:active .cTs {
opacity:1;
color:white;
display:block;
}