2012-03-08 9 views
8

Mam ikonę, która wyświetla się u góry, po prawej stronie elementu div unoszącego się nad elementem div. Mój kod jest tak:CSS-link do ikony widocznej po najechaniu myszą

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

i odpowiadający mu plik css zawiera:

.edit_hover_class:hover { 
    background: url("trash.gif") no-repeat scroll right top; 
} 

Chcę dołączyć link do ikony edycji, jest to możliwe dzięki prostym css? Jeśli tak to jak?

+0

Nie sądzę, można to zrobić z czystym CSS. Co jest złego w umieszczaniu linku w kodzie HTML? –

+0

Dlaczego mimo to chcesz ukryć ten link? –

+2

Aby zmniejszyć bałagan. Tak jak ten komentarz pokazuje "to jest świetny komentarz" lub "oznacz ten komentarz ..." tylko po najechaniu myszą. – Appster

Odpowiedz

26

Można ukryć link do momentu aktywowania tak:

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

Apostolskiej jsfiddle:

http://jsfiddle.net/Auzm5/

Lub jeśli chcesz tylko ikonę link użyć CSS visibility:

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

+0

nie będzie to również ukryć obrazu? –

+0

@CecilTheodore Ukryje ikonę, aż najedzie na div tak. Uważam, że tego wymaga PO. – Curt

+0

Cóż, jak ktokolwiek może zobaczyć kosz, chyba że najedzie na niego? Inną opcją byłoby utworzenie 2 obrazów, umieszczonych bezwzględnie na wierzchu drugiego. Ten na górze jest zawarty w łączu i wyświetla: brak. Po najechaniu kursorem na dolny obraz, Łącze, a następnie Wyświetl: blok i można kliknąć. –

-1

I miałaś przetestowane ale warto spróbować:

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

Ten kod wydaje się bezcelowy. Nie zobaczysz typu kursora ani wskaźników-wydarzeń, dopóki i tak nie pojawi się wskaźnik myszy. – Curt

+0

Jak powiedziałem, nieprzetestowane, ale widzę twój punkt widzenia. –