Link bei MouseOver einblenden

- WebmasterWork »
- Grafik & Programmierung »
- (X)HTML & CSS & DHTML & Javascript »
- Link bei MouseOver einblenden »

Lieber Besucher, herzlich willkommen bei: WebmasterWork. Falls dies dein erster Besuch auf dieser Seite ist, lese dir bitte die Hilfe durch. Dort wird dir die Bedienung dieser Seite näher erläutert. Darüber hinaus solltest du dich registrieren, um alle Funktionen dieser Seite nutzen zu können. Benutze das Registrierungsformular, um dich zu registrieren oder informiere dich ausführlich über den Registrierungsvorgang. Falls du dich bereits zu einem früheren Zeitpunkt registriert hast, kannst du dich hier anmelden.

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Freitag, 30. März 2012, 13:00

Hallo zusammen,
ich bin mir nicht sicher ob der Titel das wiedergibt was ich eigentlich suche. Aber "Versuch mach kluch" :-)

Folgende Aufgabenstellung:
Ich habe eine Tabelle mit mehreren Spalten und Zeilen. In jeder Zelle ist ein Titel und einer kleinen Grafik links.
Wenn ich mit der Maus über die Zelle fahre, sollen Grafikn (Icons) oder Links eingeblendet werden für "löschen" und "bearbeiten". Wenn die Maus wieder weggleitet, sollen die Links verschwinden. Die Links sollen natürlich auch anklickbar sein.

Hat einer eine Idee wie ich das anstellen kann?

Normale MouseOver-Sachen habe ich versucht, jedoch blenden die meisten nur kleine Infofelder ein und sobald man dort auf den Link (oder das Icon) klicken will, verlässt man ja die Tabellenzelle und somit verschwindet auch das kleine Fenster.

Ich hoffe ich konnte gut genug beschreiben worum es geht. Ich wäre für jede Idee sehr dankbar.

MfG

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

tasks

Mitglied

Dabei seit: 27.01.2012

Beiträge: 33

Freitag, 30. März 2012, 15:48

Hallo

Falls ich das richtig verstanden habe, löst du das am einfachsten mit jQuery.

Die Zeilen einer Tabelle machst du ja mit <tr></tr>. In diesen Tag machst du den onmouseover und einen onmouseout rein.
Beim onmouseover machst du das hier rein und beim onmouseout machst du das hier

Gruss Mauro

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Freitag, 30. März 2012, 23:41

Hi Mauro,
danke für den Tipp. Im Grunde ist es das was ich suche. In den Beispielen ist es zwar mit einem Button-Klick, aber das krieg ich bestimmt irgendwie hin.
Mit jQuery habe ich noch nicht viel gemacht, werde mich da aber mal reinfuchsen.

Besten Dank erstmal!

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 3 173

Samstag, 31. März 2012, 11:27

probier doch sowas

	Cascading Style Sheet
1 2 3 4 5 6	table#tabell tr:hover td a{ display:block; } table#tabell tr td a{ display:none; }

Mein kleines Projekt
-Cruel Online-

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Samstag, 31. März 2012, 21:23

Hi cccpmik,
danke aber irgendwie will das auch nicht so richtig.
Im Grunde suche ich sowas hier: http://aktuell.de.selfhtml.org/artikel/css/infobox/

Aber das kriege ich auch nicht so recht angepasst.

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

tasks

Mitglied

Dabei seit: 27.01.2012

Beiträge: 33

Dienstag, 3. April 2012, 08:59

Das ist ja genau das, was cccpmik dir vorgeschlagen hat.
Falls du damit Probleme hast, können wir dir helfen!
Gruss

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 3 173

Dienstag, 3. April 2012, 09:36

es wäre hilfreich, wenn du deine versuche bei jsfiddle posten könntest und wir könnten dann live sehen was da schief läuft und können dir auch bei deinem Problem helfen

Mein kleines Projekt
-Cruel Online-

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Dienstag, 3. April 2012, 13:14

Hallo zusammen,

danke für Eure Unterstützung. Ich werde mein Script heute abend mal online posten, vielleicht seht ihr ja was was ich nicht sehen. Den genauen Link gebe ich dann mit.

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 3 173

Dienstag, 3. April 2012, 13:18

wieso nicht einfach ein HTML Code und CSS styles bei JSFiddle posten und fertig wie gesagt, da kann man dann den code verändern und dir neue version senden

Mein kleines Projekt
-Cruel Online-

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Dienstag, 3. April 2012, 13:53

Gute Frage ... ich kannte den Dienst noch nicht. Werd ich aber da machen, ist wirklich einfacher und schneller.

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Dienstag, 3. April 2012, 14:53

jsFiddle ist ne schöne Sache, werd ich mir für sowas merken!

Ich habe es jetzt doch hinbekommen: hier mal der Link: http://jsfiddle.net/LxgmS/

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

cccpmik

Foren Gott

Dabei seit: 04.09.2007

Beiträge: 3 173

Dienstag, 3. April 2012, 15:14

in jsfiddle kannste auch sehr gut bibliotheken wie jQuery usw verwenden(links steht choose framework) auch kannste ein /embedded/result/ in url dranhängen zb so http://jsfiddle.net/LxgmS/embedded/result/ und dann kannste diese vorschau zb in dein Blog einbauen. WMW Braucht umbedingt ein BBCode icon dafür

Mein kleines Projekt
-Cruel Online-

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »cccpmik« (3. April 2012, 15:14)

MagellanMedia

Routinier

Dabei seit: 04.11.2011

Beiträge: 288

Dienstag, 3. April 2012, 15:15

Recht hast du! Also ich werde jsFiddle definitiv weiter verwenden - ist wirklich praktisch!!

----------
Webdesign und Webprogrammierung
http://www.magellan-media.de

Link bei MouseOver einblenden

Cascading Style Sheet

Ähnliche Themen