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

您问题的一个解决方案可能就像这样

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

Answer 3

试试这个

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

我也编辑了你的一些css

jsfiddle File

Div鼠标单击显示不起作用

3 个答案: