Div鼠標單擊以顯示不工作

我想隱藏div直到用戶單擊它，然後它應顯示。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根據您的CSS/HTML

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

來源

2013-08-27 vaibhav jain

的是什麼怪你的'html'中的代碼？ – Vector

請忽略..它的django模板代碼。 –

Javascript/Jquery在哪裏？ –

，你需要一些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-27 13:09:33 ninty9notout

是的，這是我想要的，但我不能得到它的工作。 –

嘗試但沒有發生..codeponcode是可見的，當我看到源代碼是'span class =「cTs」'的透明層時 –

請確保您的CSS和HTML與小提琴中的CSS匹配。這是必需的工作。 – ninty9notout

一個解決你的問題可能是這樣

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

來源

2013-08-27 13:11:10

試試這個

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

還我已經編輯了一些你的CSS

jsfiddle File

來源

2013-08-27 13:11:19

Div鼠標單擊以顯示不工作

回答

相關問題