2012-03-08 22 views
8

Ekranın üst kısmında, div üzerinde gezinirken bir divun sağ tarafında görüntülenen bir simgem var.Vurgulayıcıda görülebilir bir simgeye bağlantı CSS- bağlantısı

<div class='edit_hover_class'> 
    <!-- some code --> 
</div> 

Ve tekabül css dosyası içerir:: My kod aşağıdaki gibi olduğunu

Ben düzenle simgesini bir bağlantı eklemek istediğiniz
.edit_hover_class:hover { 
    background: url("trash.gif") no-repeat scroll right top; 
} 

, sade css ile mümkündür? Öyleyse nasıl?

Sen dek bir bağlantı saklanabileceği
+0

Ben düz CSS ile bunu yapabilirsiniz sanmıyorum. Bağlantıyı HTML’e koymanın nesi yanlış? –

+0

Bağlantıyı neden gizlemek istiyorsun? –

+2

Dağınıklığı azaltmak için. Bu yorumda olduğu gibi, "bu harika bir yorum" veya "bu yorumu işaretle ..." ifadesini yalnızca gezginin üzerinde gösterir. – Appster

cevap

26

vurgulu şöyle:

<div class='edit_hover_class'> 
    <a href='#'><img src='icons/trash.gif' /></a> 
</div> 

.edit_hover_class a{ 
    visibility:hidden; 
} 
.edit_hover_class:hover a { 
visibility:visible; 
} 

See jsfiddle:

http://jsfiddle.net/Auzm5/

Yoksa sadece bağlamak için simgesini kullanın CSS visibility istiyorsanız:

http://jsfiddle.net/Auzm5/1/

+0

bu durumun görüntüsünü de gizlemez mi? –

+0

@CecilTheodore Bu simge, imlecin üzerine gelene kadar gizler. OP'nin gerektirdiği bu olduğuna inanıyorum. – Curt

+0

Peki, üzerinde çöp kutusu yoksa kimse nasıl çöpü görebilir? Başka bir seçenek, her ikisi de diğerinin üzerinde kesinlikle konumlandırılmış 2 resim oluşturmak olacaktır. Üstte bir link içinde yer alan ve Ekran: yok. Alt resmin üzerine gelin, Bağlantı ve ardından Ekran: blok ve tıklanabilir. –

-1

Bunu test sığınak ama onun bir cami:

HTML

<div class='edit_hover_class'> 
    <a href='#'><img src='icons/trash.gif' /></a> 
</div> 

CSS

.edit_hover_class a { 
    pointer-events: none; 
    cursor: default; 
} 

.edit_hover_class a:hover { 
    pointer-events: auto; 
    cursor: pointer; 
} 
+1

Bu kod anlamsız görünüyor. Yine de, imleç türünü veya işaretçi etkinliklerini görmezden gelinceye kadar göremezsiniz. – Curt

+0

Dediğim gibi, test edilmedim, ama senin noktasını görebiliyorum. –

İlgili konular