2009-09-19 15 views
11

Sono relativamente nuovo a JQuery e vorrei poter visualizzare un menu al passaggio del mouse.JQuery Mostra classe Nascondi al passaggio del mouse

Ecco il codice html

<td class ="comment_div"> <?php echo("$comment_data['comment']); ?> <br/> 
    <span class="comment_actions"> Approve | Delete | Spam | Edit</span> 
</td> 

Poi il JQuery

$("comment_div").hover(
     function() { $(".comment_actions").show(); }, 
     function() { $(".comment_actions").hide(); } 
); 

Questo funziona eccetto per sto tirando più commenti fuori e questo solo mostrerà il menù del primo div non importa quale "commento" è hoverd. Mi piacerebbe avere il menu mostra solo per il commento che è attualmente in fase di hoverd over. Penso di aver bisogno di usare "$ this" per fare questo lavoro ma non sono sicuro di come.

Grazie.

risposta

18

Se sto leggendo che correttamente il formato deve essere-

$(".comment_div").hover(
    function() { $(this).children(".comment_actions").show(); }, 
    function() { $(this).children(".comment_actions").hide(); } 
); 

Modifica perché io sono un completo idiota.

+0

Non mostrare/nascondere "commento_div"? Sto cercando di mostrare/nascondere "commenti_azioni" al passaggio del mouse. – BandonRandon

+0

Hai assolutamente ragione- Sono mezzo addormentato oggi e fuori allenamento. Quello * dovrebbe * essere corretto ora. –

+0

Grazie che funziona ora! – BandonRandon

2

Qualcosa di simile a questo funziona per me:

<script> 
$(document).ready(function() { 
$(".container").hover(
     function() { $(this).children('.comment_actions').show(); }, 
     function() { $(this).children('.comment_actions').hide(); } 
); 

}); 

</script> 

<style> 

</style> 


<table border="1"><tr> 
<td class ="container"><br/> 
    asd<span class="comment_actions">Approve | Delete</span> 
</td> 
<td class ="container"><br/> 
    asd <span class="comment_actions">Approve | Delete</span> 
</td> 
<td class ="container"><br/> 
    asd<span class="comment_actions"> Approve| Delete</span> 
</td> 
</tr></table> 

Tuttavia, il problema che dovrai affrontare è librarsi azioni nel corso di un div che ha display: none; impostato. Potresti prendere in considerazione l'idea di avvolgerlo in qualcosa che è sensibile al mouse e quindi visualizzare/nascondere i bambini.

Problemi correlati