Hannes: Link hovern => wo anders passiert was! wie?

Hallo!

Gerne hätte ich die Suche benutzt, doch habe keine Ahnung, wie ich ein passendes Wort finden kann.

Was ich will ist folgendes:

Ich habe hier ein "Navigation" aus reinem Text:

[•] Home
[ ] Über mich
[ ] Hobbies
...

Die Links sind "Home", "Über mich", "Hobbies", ...

Jetzt will ich, dass wenn ich z.B. "Home" hovere, der punkt in der Klammer kommt.
Das habe ich mir so vorgestellt:

ich mach überall die Klammen mit dem Punkt, also [•] - nur mach ich den Punkt in der gleichen Farbe wie den Hintergrund - er ist unsichtbar. Jetzt will ich aber, dass ein Hover die Farbe dieses Punktes ändert.

Das wäre nur eine "Theorie". Im Endeffekt will ich den Punkt jeweils zum Link, also beim Beispiel oben, wäre ich mit der Maus gerade auf "Home".

Hat jemand eine Idee?

  1. Hi Hannes,

    das hatten wir schonmal, hast Du mal im Archiv nach hover gesucht?

    Viele Grüße
    Mathias Bigge

    1. Hallo Mathias.

      das hatten wir schonmal, hast Du mal im Archiv nach hover gesucht?

      Wozu? https://forum.selfhtml.org/?t=101736&m=625079 ;)

      Gruß, Ashura

      --
      Selfcode: sh:( fo:| ch:? rl:? br:^ n4:& ie:% mo:| va:) de:[ zu:| fl:( ss:{ ls:# js:|
  2. Hallo Hannes,

    Ich habe hier ein "Navigation" aus reinem Text:

    [•] Home
    [ ] Über mich
    [ ] Hobbies

    Jetzt will ich, dass wenn ich z.B. "Home" hovere, der punkt in der Klammer kommt.
    Das habe ich mir so vorgestellt:

    das Folgende funktioniert in Mozilla 1.7 und in Opera 7.54, aber rate mal in welchem Browser das nicht geht!

    Du kannst den Punkt aber mit einem Hintergrundbild zwischen den Klammern einblenden (nicht wiederholt ohne span). Das geht. Dann ist es zwar strenggenommen kein reines Textmenü mehr, aber sonst bleibt dir nur JavaScript (mouseover und mouseout), unm den gewünschten Effekt im IE zu erzielen.

    Gruß Gernot

    <html>
    <head>
    <title>punkthover</title>
    <style type="text/css">
    <!--
    a {
    text-decoration:none;
    color:#000000;
    font-size:1em;
    }

    a .punkt {
    font-size:4em;
    color:#FFFFFF;
    }

    a:hover .punkt {
    color:#000000;
    }

    -->
    </style>
    </head>
    <body >
    <a href="#">[&nbsp;<span class="punkt">.</span>&nbsp;] meine Hobbies</a>
    </body>
    </html>

    1. Hi Gernot,

      das Folgende funktioniert in Mozilla 1.7 und in Opera 7.54, aber rate mal in welchem Browser das nicht geht!

      Seltsamerweise zeigt der IE den Punkt aber bei einem Klick auf den Link an... Zumindest bei IE 6.xx auf Win XP SP 2.

      MfG, Dennis.

      --
      Mein SelfCode: ie:{ fl:( br:> va:) ls:[ fo:) rl:( n4:# ss:) de:] js:| ch:{ sh:( mo:} zu:| [decode]
      That's life - Es gibt im Leben[tm] keine Zurück-Taste. (Fabian Transchel)
    2. Hallo,

      das Folgende funktioniert in Mozilla 1.7 und in Opera 7.54, aber rate mal in welchem Browser das nicht geht!

      Du kennst den a:hover-Trigger-Trick für den IE noch nicht?

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
              "http://www.w3.org/TR/html4/strict.dtd">
      <html>
      <head>
      <title>punkthover</title>
      <style type="text/css">
      <!--
      body {
        font-size:101%;
      }

      a, a:link, a:active, a:visited, a:focus, {
        text-decoration:none;
        color:#000;
      }

      a .punkt {
        color:#FFF;
      }

      a:hover {
        color:black;
      }

      a:hover .punkt {
        color:#000;
      }
      -->
      </style>
      </head>
      <body >
      <a href="#">[&nbsp;<span class="punkt">&bull;</span>&nbsp;] meine Hobbies</a>
      </body>
      </html>

      Der IE ändert das Aussehen von in A entaltenen Elementen bei A:hover nur, wenn sich das Aussehen des A-Elements selbst auch ändert, und sei es nur, dass sich die Farbe von #000 auf black ändert.

      viele Grüße

      Axel

      1. Hallo Axel,

        Du kennst den a:hover-Trigger-Trick für den IE noch nicht?

        Nein in der Tat, der war mir neu, klasse Trick, danke!

        Gruß Gernot

      2. hi,

        Der IE ändert das Aussehen von in A entaltenen Elementen bei A:hover nur, wenn sich das Aussehen des A-Elements selbst auch ändert, und sei es nur, dass sich die Farbe von #000 auf black ändert.

        sogar der wechsel von #000 auf #000000 bzw. umgekehrt reicht m.W. aus ;-)

        gruß,
        wahsaga

        --
        "Look, that's why there's rules, understand? So that you _think_ before you break 'em."