1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Mehrere Hover Effekte!

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von ak56Lk, 07.11.05.

  1. ak56Lk

    ak56Lk Gast

    Hallo!
    Ma ne Frage! Kenn mich zwar gut mit HTML und so aus, aber ich weiss nich, ob mehrere Hover-Effekte möglich sind!
    Ich habe im Head bereich als CSS den hover definiert (a:hover {color:#ff0000;} !
    Nun ist es ja so, wenn man <a href=""> schreibt, dass der link dann gehovert wird!
    schreibt man <a href=""><font color="#">text</font></a> wird dieser widerrum durch die definierte farbe ersetzt!

    Ist es möglich dem link eine andere Farbe mit einem anderen Hovereffekt zuzuweisen?! Also, wenn normal der link orange ist und rot hovert, aber ein anderer in weiss, der grün gehovert wird (o.ä.)

    Wers nich verstanden hat, auch net schlimm :-D
    aber wäre für brauchbare antworten dankbar!

    (Vermutung: bestimmt wird javascript benötigt)

    naja,
    mfg
    ak56Lk
     
  2. klausimausi

    klausimausi deaktivierter Benutzer

    Dabei seit:
    05.01.04
    Beiträge:
    836
    Hallo ak56Lk (Mensch, diese Nicks bringen mich noch mal um ;))

    das geht auch ohne JavaScript, aber mit verschiedenen Klassen, die Du definierst.

    Hier ein Auszug aus der CSS für meine bald lauchende neue Website, wo ich 2 (und mehr) verschiedene Klassen (geilerknopf ;) und normaltext) definiert habe, um auch verschieden aussehende Links (inkl. HOVER) haben zu können:

    ...
    .geilerknopf a:link {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    color: #000000;
    border: 2px solid #ff6600;
    background-color: #ff9933;
    }

    .geilerknopf a:visited {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    color: #000000;
    border: 2px solid #ff6600;
    background-color: #ff9933;
    }

    .geilerknopf a:hover {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    color: #ffffff;
    border: 2px solid #ffffff;
    background-color: #ff9933;
    }

    .geilerknopf a:active {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    color: #333333;
    border: 2px solid #333333;
    background-color: #ff9933;
    }


    .normaltext {
    color:#000000;
    font-size: 12px;
    font-weight: normal;
    margin:0px 0px 0px 0px;
    background-color: #ff9933;
    }

    .normaltext p {
    color:#000000;
    font-size: 12px;
    font-weight: normal;
    margin:0px 0px 0px 0px;
    background-color: #ff9933;
    }

    .normaltext a {
    color:#000000;
    font-size:10px;
    text-decoration:none;
    font-weight:bold;
    background-color: #ff9933;
    }

    .normaltext a:link {color:#333333;background-color: #ff9933;}
    .normaltext a:visited {color:#333333;background-color: #ff9933;}
    .normaltext a:hover {color:#ffffff;background-color: #ff9933;}
    .normaltext a:active {color:#000000;background-color: #ff9933;}

    Hoffe, das hilft, bin leider auch CSS Neuling.


    Liebe Grüße

    Klaus
     
  3. Dadelu

    Dadelu Reinette Coulon

    Dabei seit:
    06.07.05
    Beiträge:
    939
    Hmm ich glaube, ich muss deine Befürchtung bestätigen.. ;) Das es mit JavaScript geht, weiss ich, weil ich es auch schon so gesehen habe.. Rein mit CSS ist es, wenn ich mich nicht täusche auch möglich, aber ist ne Menge Arbeit.. Man muss verschiedenen eigene Klassen definieren und diese dann den Objekten einzeln zuweisen.. Also nicht zu empfehlen.. Da greifst du lieber auf JS... Aber schreibe deine Frage doch lieber hier in diesem Forum.. Da hat es wirklich 1A Java Scriptler und deine Frage wird sicherlich beantwortet ;)

    Saletti
     
  4. Hans Müller

    Hans Müller Granny Smith

    Dabei seit:
    07.11.05
    Beiträge:
    16
    das machst du wie oben schon gesagt, wirklich am einfachsten mit verschiedenen klassen. ich sehe jetzt keinen grund dafür javascript zu verwenden.
     
  5. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    das kann man mit Klassen lösen, muß es aber nicht. Es ginge auch mit Attributbedingten Formaten. Etwa so:

    Code:
    ...
    <style>
    /* um bei deinen Farben zu bleiben */
    a[ href="seite1.htm"]:link {
      color: #f00;
      }
    a[ href="seite1.htm"]:hover {
      color: #f93;
     }
    a[ href="seite2.htm"]:link {
      color: #fff;
      }
    a[ href="seite2.htm"]:hover {
      color: #0f0;
     }
    
    </style>
    ...
    <ul>
      <li><a href="seite1.htm">Link1</a></li>
      <li><a href="seite2.htm">Link2</a></li>
      <li><a href="seite3.htm">Link3</a></li>
      ...
    </ul>
    
    Und selbst wenn man's mit einzelnen Klassen löst ist das allemal schlauer und i.d.R. valider und sematisch korrekter als mit JS.

    Ergänzung: idealerweise faßt gleiche Anweisungen zusammen in eine Masterdefinition und fügst dann nur noch die Ausprägungen als einzelen Statements hinten an. Um das Beispiel von klausimausi zu bemühen:

    a {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    color: #000000;
    border: 2px solid #ff6600;
    background-color: #ff9933;
    }

    erst einmal für alles, und dann nur noch die veränderten Werte als einzelne Anweisung dazu:

    .geilerknopf a:hover {
    border: 2px solid #ffffff;
    }

    ist einfach schlanker und besser lesbar. Richtig ist beides.

    Gruß Stefan
     
  6. klausimausi

    klausimausi deaktivierter Benutzer

    Dabei seit:
    05.01.04
    Beiträge:
    836
    Hi Stefan,

    danke, da habe ich ja auch noch was lernen können :)
    Nun werde ich meinen Code mal etwas entschlanken...


    Gruß

    Klaus
     
  7. mullzk

    mullzk Linsenhofener Sämling

    Dabei seit:
    04.01.04
    Beiträge:
    2.529
    mist
    fühle dich gekarmad, du unser aller css-gott....
     
  8. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    *tief verneig* … wenn's gehülft hat, … :)

    Gruß Stefan
     
  9. mullzk

    mullzk Linsenhofener Sämling

    Dabei seit:
    04.01.04
    Beiträge:
    2.529
    dafür noch gleich eine anschluss-frage: kann man attributbedingte Formaten auch für mehrere bedingungen angeben? also im sinne von
    a[ href="seite1.htm" || href="seite2.htm]:hover
    oder
    a[ href="seite1.htm" && target="_blank"]:hover
     
  10. stk

    stk Grünapfel

    Dabei seit:
    05.01.04
    Beiträge:
    7.141
    Moin,

    jein. Was Du machen kannst, ist mehrere unterschiedliche Attribute hintereinander zu stellen und damit eine AND-Verknüpfung schaffen. Also:

    a {color: blue;}

    a[ href*="page"][ target*="_"] {
    color: red;
    }

    formartiert sehr treffsicher Link Nr. 4 wie gewünscht:

    <ul>
    <li><a href="seite1.htm">Link 1</a></li>
    <li><a href="page2.htm" target="neu">Link 2</a></li>
    <li><a href="seite3.htm">Link 3</a></li>
    <li><a href="page4.htm" target="_blank">Link 4</a></li>
    <li><a href="seite5.htm">Link 5</a></li>
    <li><a href="seite6.htm" target="_blank">Link 6</a></li>
    </ul>

    Der Selektor *= sucht nach einem Teilstring (egal wo) im Attribut.

    Eine Einschränkung sollte man fairerweise aber kommunizieren (man ahnt es): IE6 kann das alles mal wieder nicht o_O. Falls jemand in JS fit ist, darf er/sie aber gerne mal ein behavior: url(attrib.htc) dafür schreiben ;).

    Gruß Stefan
     
  11. ak56Lk

    ak56Lk Gast

    Wie cool is das denn? Hätt ja gar net mit sovielen guten Antworten gerechnet! Vielen, vielen Dank an alle, die hier gepostet haben! Ich werd mich jetzt erstma dranhängen und verschiedene Arten austesten! Ich schreib gleich nochn Post, ob ichs hingekriegt hab oder ich noch zu blöde bin :p
     
  12. ak56Lk

    ak56Lk Gast

    <style>
    /* um bei deinen Farben zu bleiben */
    a[ href="seite1.htm"]:link {
    color: #f00;
    }
    a[ href="seite1.htm"]:hover {
    color: #f93;
    }
    a[ href="seite2.htm"]:link {
    color: #fff;
    }
    a[ href="seite2.htm"]:hover {
    color: #0f0;
    }

    </style>
    ...
    <ul>
    <li><a href="seite1.htm">Link1</a></li>
    <li><a href="seite2.htm">Link2</a></li>
    <li><a href="seite3.htm">Link3</a></li>
    ...
    </ul>

    Das hab ich versucht, klappte aber irgendwie nich!
    Danach hab ichs hiermit versucht:

    a {
    font-size: 11px;
    font-weight: bold;
    padding: 0px 0px 0px 6px;
    margin: 0px 0px 0px 0px;
    text-decoration: none;
    display: block;
    color: #000000;
    border: 2px solid #ff6600;
    background-color: #ff9933;
    }

    erst einmal für alles, und dann nur noch die veränderten Werte als einzelne Anweisung dazu:

    .geilerknopf a:hover {
    border: 2px solid #ffffff;
    }

    <a class="geilerknopf" href="">text</a>

    Ging aber auch net! Warum? keine ahnung! Wär nett, wenn mir da ma jemand nochma weiterhelfen könnte!

    Übrigens: Ich nutze IE6
     

Diese Seite empfehlen