0

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;
}
4

3 に答える 3

2

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/

于 2013-08-27T13:09:33.630 に答える
0

あなたの質問に対する1つの解決策はこのようなものかもしれません

.cTsdiv:hover .cTs {
opacity:1;
color:white;
display:none;
}
.cTsdiv:active .cTs {
opacity:1;
color:white;
display:block;
}
于 2013-08-27T13:11:10.027 に答える
0

これを試して

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

また、私はあなたのcssの一部を編集しました

jsfiddle ファイル

于 2013-08-27T13:11:19.887 に答える