Zeigen/Verstecken Knopf in der Tabellenzeile während des Mouseover

Ich habe eine Tabelle von Zeilen (duh) und in einer der Spalten versuche ich zwei Schaltflächen während Hover/Mouseover erscheinen. Im Moment ist es ein Anker-Tag mit einer festgelegten Breite/Höhe und einer Hintergrund-Platzierung.Zeigen/Verstecken Knopf in der Tabellenzeile während des Mouseover

Dies ist, was sie scheinen, wie wenn nicht verborgen:

Ein gutes Beispiel für das fertige Produkt grooveshark der ist Hover-Kontrollen:

Im Grunde frage ich mich, wie Ich würde versuchen, alle Bilder zu verstecken, außer denen, über die man gerade schwebt. Dann würde diese Reihe diese Bilder zeigen, aber verschwinden, sobald sich die Maus in eine andere Reihe bewegt.

Html-Code:

echo '<td><a href="/servers/detail.php?id='. $row['id'] .'">'.$row['server_name'].'</a><a id="option-favorite" class="rowOption"></a><a id="option-vote" class="rowOption"></a></td>';

JS-Code:

jQuery('td').live('mouseover', function() { 
    jQuery(this).closest("tr").find('a.rowOption').visible(); 
});

Quelle

2012-04-15 MCG

'visible()' ist keine jquery Funktion ... Oh, und 'live()' ist veraltet, benutze stattdessen 'on()'. – elclanrs

Wenn Sie Tabellen von Zeilen (duh) Sie CSS wie folgt verwenden können:

table#mytableofrows tr td a.button { display:none;} 
    table#mytableofrows tr:hover td a.button { display:inline-block;}

Wird für Arbeit Dieses Markup:

<table id="mytableofrows" width="100%"> 
    <tr><td> <a class="button">Hello yes this is dog</a> </td></tr> 
</table>

Quelle

2012-04-15 02:34:06

Danke, änderte es ein bisschen, aber arbeitete genau nach Bedarf! Für jeden Interessierten war der endgültige Code: http://pastebin.com/H8x8r0vW – MCG

Nice anims. :) Beachten Sie, dass ': Hover' in IE6 nicht funktioniert. In IE7 wird es funktionieren, aber Sie müssen einen Doctype setzen (siehe http://stackoverflow.com/questions/143296/problem-with-hover-in-ie-7). –

Verwenden Sie HTML5-Tags.

<!DOCTYPE html> 
<html> 
    <head> 
    <style type="text/css"> 
     table tr button { opacity:0; float:right } 
     table tr:hover button { opacity:1 } 
    </style> 
    </head> 

    <body> 
    <table border=1 width=300px> 
     <tr><td>LINE1 <button>BUTTON1</button></td></tr> 
     <tr><td>LINE2 <button>BUTTON2</button></td></tr> 
     <tr><td>LINE3 <button>BUTTON3</button></td></tr> 
    </table> 
    </body> 
</html>

Quelle

2012-08-16 20:34:27

Zeigen/Verstecken Knopf in der Tabellenzeile während des Mouseover

Antwort

Verwandte Themen