Mel: Mouseover bei Links

Hallo,

ich bin auf der Suche nach einer Lösung für eine Mouseoverproblem.
Ich habe auf meiner Webseite eine Art Tag-Cloud gebastelt und möchte jetzt noch, dass jeder Wirt bei Mourseover die Farbe verändert. Da ich allerdings in der Tag Clould bereits verschiedene Farben verwende, möchte ich das nicht über das CSS und auch nicht über JavaScript machen, sondern einfach in den Code regeln.

Momentan sieht das für die einzelnen Worte so aus:

<a href="Leistung.html" style="font-size:24px; text-decoration:none; color: #B8B8DF;"><strong>Coaching</strong></a>
<a href="beratung.html" style="font-size:38px; text-decoration:none; color: #000066;"> <strong>Beratung</strong></a>

Wie kann ich es da ändern, dass die Worte die gleiche Größe behalten, aber jeweils die Farbe bei mouseover ändern?

Danke

Mel

  1. Da ich allerdings in der Tag Clould bereits verschiedene Farben verwende, möchte ich das nicht über das CSS [...] machen, sondern einfach in den Code regeln.

    Das da unten ist CSS.

    <a href="Leistung.html" style="font-size:24px; text-decoration:none; color: #B8B8DF;"><strong>Coaching</strong></a>
    <a href="beratung.html" style="font-size:38px; text-decoration:none; color: #000066;"> <strong>Beratung</strong></a>

    Wie kann ich es da ändern, dass die Worte die gleiche Größe behalten, aber jeweils die Farbe bei mouseover ändern?

    Mit Inline-Styles ist das nicht möglich.

    Gib' den einzelnen Menüpunkten Klassen oder IDs und formatiere diese im externen CSS-File gesondert.

    1. Da ich allerdings in der Tag Clould bereits verschiedene Farben verwende, möchte ich das nicht über das CSS [...] machen, sondern einfach in den Code regeln.

      Das da unten ist CSS.

      <a href="Leistung.html" style="font-size:24px; text-decoration:none; color: #B8B8DF;"><strong>Coaching</strong></a>
      <a href="beratung.html" style="font-size:38px; text-decoration:none; color: #000066;"> <strong>Beratung</strong></a>

      Wie kann ich es da ändern, dass die Worte die gleiche Größe behalten, aber jeweils die Farbe bei mouseover ändern?

      Mit Inline-Styles ist das nicht möglich.

      Gib' den einzelnen Menüpunkten Klassen oder IDs und formatiere diese im externen CSS-File gesondert.

      Hallo,

      Danke für den Tipp, aber das Ganze ist kein Menü. Die TagCloud nimmt die ganze Seite ein und ist quasi die erste Seit der Homepage und besteht aus ziemlich vielen Worten und Sätzen. Gibt es denn keinen Möglichkeit einem einzelnen Wort als Link beim Mouseover eine andere Farbe zu geben als ohne Mouseover? Also einfach die andere Farbe ergänzend in den Code einzutragen?

      1. Danke für den Tipp, aber das Ganze ist kein Menü.

        Ach nein?

        Die TagCloud nimmt die ganze Seite ein und ist quasi die erste Seit der Homepage und besteht aus ziemlich vielen Worten und Sätzen.

        Also doch ein Menü :p

        Gibt es denn keinen Möglichkeit einem einzelnen Wort als Link beim Mouseover eine andere Farbe zu geben als ohne Mouseover?

        Sicher, per CSS in einem externen Stylesheet - entweder mit Klassen, IDs oder über andere Möglichkeiten wie nth-child() oder dem Attribut-Selektor

        1. Danke für den Tipp, aber das Ganze ist kein Menü.

          Ach nein?

          Die TagCloud nimmt die ganze Seite ein und ist quasi die erste Seit der Homepage und besteht aus ziemlich vielen Worten und Sätzen.

          Also doch ein Menü :p

          Gibt es denn keinen Möglichkeit einem einzelnen Wort als Link beim Mouseover eine andere Farbe zu geben als ohne Mouseover?

          Sicher, per CSS in einem externen Stylesheet - entweder mit Klassen, IDs oder über andere Möglichkeiten wie nth-child() oder dem Attribut-Selektor

          Ich hatte gehofft, es gebe eine einfache html-Lösung. Ich bin wirklich kein Experte, sondern habe mir nur mit dem TagCloud-Generator (http://www.tagcloud-generator.com/generator.php#anker) so etwas zusammengebastelt und habe mich nun gefragt, ob die Möglichkeit besteht einfach in den HTML-Code das Mouseover als Farbänderung einzubauen - ohne CSS etc.

          1. Ich hatte gehofft, es gebe eine einfache html-Lösung.

            Für ein CSS-Problem?

            Ich bin wirklich kein Experte, sondern habe mir nur mit dem TagCloud-Generator (http://www.tagcloud-generator.com/generator.php#anker) so etwas zusammengebastelt und habe mich nun gefragt, ob die Möglichkeit besteht einfach in den HTML-Code das Mouseover als Farbänderung einzubauen - ohne CSS etc.

            Nochmal zum Mitschreiben: Nein.

            Aber die CSS-Lösung ist mehr als trivial.

            1. Ich bin wirklich kein Experte, sondern habe mir nur mit dem TagCloud-Generator (http://www.tagcloud-generator.com/generator.php#anker) so etwas zusammengebastelt und habe mich nun gefragt, ob die Möglichkeit besteht einfach in den HTML-Code das Mouseover als Farbänderung einzubauen - ohne CSS etc.

              Was sie meint ist wohl, den CSS-Code gleich im gleichen File wie den HTML-Code zu notieren.

              @Mel:
              Das ist möglich, allerdings nicht über das style-Attribut. Du kannst aber class- und id-Attribute verwenden und dann die CSS-Eigenschaften in einem style-Element notieren. <http://de.selfhtml.org/css/formate/zentrale.htm@title=So wie es hier beschrieben wird.> Dann benötigst du kein zusätzliches css-File.

              Ob das so sinnvoll ist, ist allerdings eine andere Frage. Besser ist wohl, was suit meinte (aber leider wie so viele "Alteingesessenen" hier drin für Anfänger vielleicht nicht mehr allzu verständlich rüberbrachte): Schreibe für die verschiedenen verwendeten Farben jeweils eine eigene css-Klasse und formatiere diese in einem separaten css-File. <http://de.selfhtml.org/css/formate/zentrale.htm#klassen@title=Das machst du so.> Dort kannst du auch deine Farben für nicht-mouseover und alle sonstigen Eigenschaften angeben.
              In deinem HTML-Code musst du dann nur noch die Klassen an die Tags vergeben.
              Dort steht dann z.B. noch

                
              <a href="Leistung.html" class="tag_1">Coaching</a>  
              
              

              und in deinem separaten css-File steht dann:

                
              .tag_1{ font-size:24px; font-weight:bold; text-decoration:none; color: #B8B8DF; }  
              .tag_1:hover,.tag_1:active,.tag_1:active{ color: #deinefarbe }  
                
              Gruss  
              
              
              1. <a href="Leistung.html" class="tag_1">Coaching</a>

                Wenn es tag_1 bis tag_n gibt und je Tag genau eine Klasse existiert, ist das ein ziemlich sicheres Indiz, dass es sich entweder um eine eine ID handeln sollte oder dass das bereits angesprochene nth-child() besser geeignet wäre.

                Ebenso ist der Attribut-Selektor geeigneter - a[href=Leistungen.html]:hover { foo: bar; }

                1. Ebenso ist der Attribut-Selektor geeigneter - a[href=Leistungen.html]:hover { foo: bar; }

                  Natürlich. Aber ohne die genau Anwendung zu kennen, ist "tag_1" nichts anderes als ein Beispiel - das verdeutlichen soll wos hinkommt.

                  1. Ebenso ist der Attribut-Selektor geeigneter - a[href=Leistungen.html]:hover { foo: bar; }

                    Natürlich. Aber ohne die genau Anwendung zu kennen, ist "tag_1" nichts anderes als ein Beispiel - das verdeutlichen soll wos hinkommt.

                    Ja, ein mehr als schlechtes Beispiel, weil du keinen Hintergrund dazu lieferst und davon ausgehen musst, dass der/die OP keine Ahnung hat, da sonst die Frage so garnicht gestellt würde.

                    1. Vielen Dank für die Tipps, aber als jemande, der zum zweiten Mal eine Webseite gebaut hat, ist mir das alles zu kompliziert und ich verzichte auf das Mouseover. Trotzdem Danke.

                      Grüße
                      Mel

                      1. Om nah hoo pez nyeetz, Mel!

                        Vielen Dank für die Tipps, aber als jemande, der zum zweiten Mal eine Webseite gebaut hat, ist mir das alles zu kompliziert und ich verzichte auf das Mouseover. Trotzdem Danke.

                        es ist wesentlich einfacher als deine Tag-Wolke, die du gebaut hast. Abgesehen davon, dass dein HTML stark verbesserungswürdig ist (Wenn du Interesse hast und lernbereit bist, können wir dann auch da gemeinsam etwas tun) zeige ich dir, was zu tun ist. (Das wäre dann allerdings ebenfalls stark verbesserungswürdig, wie suit bereits richtig gesagt hat.)

                        #1# In den Kopf der HTML-Datei fügst du ein:

                        <link rel="stylesheet" type="text/css" href="format.css">
                        
                        

                        #2# aus

                        <a href="Leistung.html" style="font-size:24px; text-decoration:none; color: #B8B8DF;"><strong>Coaching</strong></a> <a href="beratung.html" style="font-size:38px; text-decoration:none; color: #000066;"> <strong>Beratung</strong></a>

                        machst du

                        <a href="Leistung.html" class="leistung" style="font-size:24px; text-decoration:none; color: #B8B8DF;"><strong>Coaching</strong></a> <a href="beratung.html" class="beratung" style="font-size:38px; text-decoration:none; color: #000066;"> <strong>Beratung</strong></a>

                        #3# Im selben Verzeichnis wie die HTML-Datei legst du die (Text-)Datei "format.css" an.

                        #4# in die format.css schreibst du

                        .leistung:hover {color: #123456;} .beratung:hover {color: #512345;}

                        Matthias

                        --
                        1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
                        1. So einfach ist das auch nicht :)

                          http://24ways.org/2006/marking-up-a-tag-cloud

                    2. weil du keinen Hintergrund dazu lieferst und davon ausgehen musst, dass der/die OP keine Ahnung hat, da sonst die Frage so garnicht gestellt würde.

                      Wenn dir das klar ist, warum gibst du selbst dann für Anfänger nicht nachvollziehbare, viel zu kurze und knappe Statements ab?

                      Zuviele Korrekturvorschläge auf einmal können störend sein und die Benennung der Klassen mit "tag_x" erleichtert eindeutig das Verständnis, was eigentlich passiert.

                      gruss

                      1. weil du keinen Hintergrund dazu lieferst und davon ausgehen musst, dass der/die OP keine Ahnung hat, da sonst die Frage so garnicht gestellt würde.

                        Wenn dir das klar ist, warum gibst du selbst dann für Anfänger nicht nachvollziehbare, viel zu kurze und knappe Statements ab?

                        Lies bitte die Ausgangsfrage und sag mir dann, ob meine Antwort falsch, ungenau oder nicht nachvollziehbar war.

                        Zuviele Korrekturvorschläge auf einmal können störend sein

                        Ja, viele Leute sind heutzutage mit dem selbständig Denken bereits überfordert - darum gibt es mittlerweile immer mehr Multiple-Choice-Fragen anstatt Freiantwortfragen (vgl. Trivial Pursuit und Wer wird Millionär) - es ist erschreckend, dass der Anteil derer, die selbst mit mehreren Antwortmöglichkeiten überfordert sind, immer mehr zunimmt.

                        In Zukunft gibt es immer weniger Menschen die immer mehr anderen Leuten haarklein erklären, wie sie sich selbst den Arsch abwischen - aber irgendwann werden auch diese ausgestorben sein ...

                        und die Benennung der Klassen mit "tag_x" erleichtert eindeutig das Verständnis, was eigentlich passiert.

                        Nein, es verschleiert die eigentliche Funktion und den Sinn von Klassen und suggeriert zudem, dass du als potentieller Helfender selbst keine Ahnung hast, was du eigentlich erzählst. Das ist, egal wie du es drehst, langfristig überhaupt nicht hilfreich.

                        1. Lies bitte die Ausgangsfrage und sag mir dann, ob meine Antwort falsch, ungenau oder nicht nachvollziehbar war.

                          Ich würde jetzt mal frei heraus behaupten, deine Antworten sind selten falsch und noch viel seltener ungenau - dafür bist du meines Eindrucks nach viel zu kompetent. Deine erste Antwort war aus meiner Sicht auch durchaus nachvollziehbar, nur hättest du schon bei diesem Posting realisieren können, dass dir die Fragende bei deinen knappen Versuchen, es ihr zu erklären nicht folgen kann.

                          Sicher, per CSS in einem externen Stylesheet - entweder mit Klassen, IDs oder über andere Möglichkeiten wie nth-child() oder dem Attribut-Selektor

                          Du beharrst aber auf deinem Anfangsstatement, ohne die offensichtlich nötigen Ergänzungen zu liefern. Danach gibst du nur noch genervt wirkende kurze Kommentare ab: "Für ein CSS-Problem?", "Nochmal zum Mitschreiben: Nein.". Aber ja, was will ich hier deine Antworten durchkauen. Wenn du nicht einsehen willst, dass Hilfe zur Selbsthilfe auch durchaus etwas ausführlicher sein darf, dann ist das eben so.
                          Es ist nunmal eine Tatsache, dass unterschiedliche Fragende mit unterschiedlichem vorhandenem Wissen hier ins Forum kommen. Für jemanden etwas weiter fortgeschrittenes wäre deine Hilfe wohl perfekt gewesen. Aber wenn man helfen will, so muss man auf das Niveau des Hilfesuchenden eingehen, ansonsten ist alle Müh' für die Katz. Es reichen ja auch ein par Hinweise auf die Themen wo offensichtlich Lücken vorhanden sind. Wenn Fragende schlicht zu faul sind, Dinge selbst zu erarbeiten, dann kann man sie immer noch darauf hinweisen.

                          Ja, viele Leute sind heutzutage mit dem selbständig Denken bereits überfordert

                          Vielleicht sollte man sagen, dass viele Leute nicht die Fähigkeiten mitbringen, die sie für die von ihnen in Angriff genommenen Projekte benötigen würden - Webentwicklung ist ein Vergnügungsfeld für alle Sorten Leute aus allen möglichen Altersklassen, dessen Anforderungen ausserdem zu Beginn je nach verwendeten Hilfsmitteln sehr minimal zu sein scheinen.

                          es ist erschreckend, dass der Anteil derer, die selbst mit mehreren Antwortmöglichkeiten überfordert sind, immer mehr zunimmt.

                          Woher kommt diese Feststellung?

                          In Zukunft gibt es immer weniger Menschen die immer mehr anderen Leuten haarklein erklären, wie sie sich selbst den Arsch abwischen - aber irgendwann werden auch diese ausgestorben sein ...

                          Würde mich ehrlich gesagt erstaunen, wenn sich da wirklich viel verändert hat im Vergleich zu früher. Ich nehme an, dieser Eindruck ist stark vom Umfeld abhängig.

                          suggeriert zudem, dass du als potentieller Helfender selbst keine Ahnung hast

                          Der war jetzt nicht wirklich notwendig. Ich bin bestimmt nicht annähernd so bewandert wie du es bist, aber in Bezug auf das oben genannte spreche ich mir durchaus das Wissen zu, mitreden zu können.

                          Nein, es verschleiert die eigentliche Funktion und den Sinn von Klassen. (...) Das ist, egal wie du es drehst, langfristig überhaupt nicht hilfreich.

                          MMn ist verschleiern nicht etwas schlechtes ganz zu Beginn. Gerade was Benennung sowie Verwendung von class und id betrifft gibt es erstens eine ganze Menge Lektüre in jedem css Tutorial und zweitens wird jeder (und hier appelliere ich jetzt an die selbstständig Denkenden) nur einigermassen fähige Mensch von selbst drauf kommen, wie diese vernünftig eingesetzt werden können. Mir ist bewusst, dass es hier drin jede Menge Fragende gibt, die das nicht hinkriegen und das spricht nicht unbedingt für eben diese...

                          Wie auch immer hätte ich dir hier wohl aber einfach klarer zustimmen können. "tag_type_1" als Benennung oder gleich id's zu verwenden, hätte mein Anliegen im Ausgangsposting genauso gut rübergebracht und hätte dann auch niemanden mehr potentiell auf Abwege bezüglich Verwendung von Klassen und id's führen können.

                          Gruss

                          1. Du beharrst aber auf deinem Anfangsstatement, ohne die offensichtlich nötigen Ergänzungen zu liefern. Danach gibst du nur noch genervt wirkende kurze Kommentare ab: "Für ein CSS-Problem?", "Nochmal zum Mitschreiben: Nein.". Aber ja, was will ich hier deine Antworten durchkauen. Wenn du nicht einsehen willst, dass Hilfe zur Selbsthilfe auch durchaus etwas ausführlicher sein darf, dann ist das eben so.

                            Ich sehe nicht ein, dass ich jemand anderem das Denken abnehmen soll - ich kann wohl davon ausehen, dass ein Erwachsener oder ein Jugendlicher so schlau ist, das Maul aufzumachen, wenn er etwas nicht versteht.

                            Einfache Frage, einfache Antwort - besonders wenn es ums "Programmieren" geht, ist dieses Vorgehen essentiell (vgl. Sie hatten Eier).

                            Es ist nunmal eine Tatsache, dass unterschiedliche Fragende mit unterschiedlichem vorhandenem Wissen hier ins Forum kommen.

                            Das bestreitet niemand

                            Für jemanden etwas weiter fortgeschrittenes wäre deine Hilfe wohl perfekt gewesen. Aber wenn man helfen will, so muss man auf das Niveau des Hilfesuchenden eingehen, ansonsten ist alle Müh' für die Katz.

                            Wenn du das fachliche Nivau meinst, ja - aber doch nicht auf das geistige.

                            Aber in den ersten Postings gab' es keinen Grund fachlich näher zu erläutern, da ja kategorisch die Alternative abgelehnt wurde - wer nicht will, der hat schon.

                            Es reichen ja auch ein par Hinweise auf die Themen wo offensichtlich Lücken vorhanden sind.

                            Die habe ich gegeben - die aufgabe des OP ist die Nachfrage, wenn et was nicht verstanden wird. Ich kann nicht jedes mal einen Roman schreiben, wenn jemand eine Trivialfrage stellt, die sich mit einer suchmaschine und der genannten Stichworte lösen lässt.

                            Wenn Fragende schlicht zu faul sind, Dinge selbst zu erarbeiten, dann kann man sie immer noch darauf hinweisen.

                            Das ist offensichtlich der Fall - aber anstatt den Hinweis zum selbst Erarbeiten zu liefern, hast du eine eher fragwürdige Lösung genannt - und das ist meines erachtens eben schlechter als gar keine zu bieten.

                            Vielleicht sollte man sagen, dass viele Leute nicht die Fähigkeiten mitbringen, die sie für die von ihnen in Angriff genommenen Projekte benötigen würden

                            Du meinst Hausverstand? Das sind Grundfertigeigen, die selbst ein Zweijähriger schon zu entwickeln beginnt.

                            es ist erschreckend, dass der Anteil derer, die selbst mit mehreren Antwortmöglichkeiten überfordert sind, immer mehr zunimmt.
                            Woher kommt diese Feststellung?

                            Erfahrung aus dem täglichen Umgang mit Menschen.

                            In Zukunft gibt es immer weniger Menschen die immer mehr anderen Leuten haarklein erklären, wie sie sich selbst den Arsch abwischen - aber irgendwann werden auch diese ausgestorben sein ...
                            Würde mich ehrlich gesagt erstaunen, wenn sich da wirklich viel verändert hat im Vergleich zu früher. Ich nehme an, dieser Eindruck ist stark vom Umfeld abhängig.

                            Nein, diese entwicklung ist (zumindest für mich) deutlich zu beobachten.

                            suggeriert zudem, dass du als potentieller Helfender selbst keine Ahnung hast

                            Der war jetzt nicht wirklich notwendig.

                            Das sollte keine Beleidigung sein.

                            Ich bin bestimmt nicht annähernd so bewandert wie du es bist, aber in Bezug auf das oben genannte spreche ich mir durchaus das Wissen zu, mitreden zu können.

                            Das habe ich nicht in abrede gestellt - wenn du aber eben nur einen Teil der möglichen Alternativen nennst, erweckst du den Eindruck, du wüsstest es nicht besser - natürlich verstehe ich deinen Einwand, dass du dem OP "irgendwie" mit einer einfach verständlichen Lösung helfen willst, aber das ist die Dunkle Seite der Macht - es bringt dem OP langfristig nichts, weil bei den Grundlangen schon falsches oder unvollständiges Wissen vermittelt wird.

                            MMn ist verschleiern nicht etwas schlechtes ganz zu Beginn.

                            Doch, das ist besonders schlimm - insbesondere, wenn der OP dann auf die Idee kommt alles mit Klassen oder IDs vollzukleistern, anstatt zu verstehen, dass es für sowas Selektoren gibt, die sich wesentlich besser dazu eigenen oder auch HTML-Attribute wie z.B. data.

                            Gerade was Benennung sowie Verwendung von class und id betrifft gibt es erstens eine ganze Menge Lektüre in jedem css Tutorial und zweitens wird jeder (und hier appelliere ich jetzt an die selbstständig Denkenden) nur einigermassen fähige Mensch von selbst drauf kommen, wie diese vernünftig eingesetzt werden können.

                            Nein, eben nicht - du setzt voraus, dass es "einigermaßen fähige Menschen" gibt - aber die sind (siehe oben) mitterlweile selten geworden. Nicht umsonst werden IDs 10x vergeben und Klassen wie "kleiner_blauer_pfeil" verwandt.

                            Mir ist bewusst, dass es hier drin jede Menge Fragende gibt, die das nicht hinkriegen und das spricht nicht unbedingt für eben diese...

                            Nicht nur hier drin - ein Großteil der "Webdesigner" da draußen stöpselt irgendwas mit Dreamweaver zusammen und gräbt selbst im Code herum (mit ausprobieren) ohne auch nur ein Tutorial gelesen zu haben. Dieselben schreiben dann aber teilweise Tutorials (oder Bücher[!]) und geben ihr schlechtes, gefährliches (Un-)Wissen weiter.

                            Wie auch immer hätte ich dir hier wohl aber einfach klarer zustimmen können. "tag_type_1" als Benennung oder gleich id's zu verwenden, hätte mein Anliegen im Ausgangsposting genauso gut rübergebracht und hätte dann auch niemanden mehr potentiell auf Abwege bezüglich Verwendung von Klassen und id's führen können.

                            Oder gleich ordentlich erklären :)