Ashura: Wie hovere ich 2 <a> Tags auf einmal?

Ich habe auf meiner Seite ein CSS-Navigationsmenü jeweils oben und - um das Nach-oben-Scrollen zuvermeiden - und unten aber mit anderen IDs eingebaut.

Nun möchte ich gerne, dass die beiden gleichen Menüpunkte oben UND unten gleichzeitig gehovert werden, wenn ich jeweils einen der beiden mit der Maus überfahre...

BITTE HELFT MIR...

  1. hi,

    Ich habe auf meiner Seite ein CSS-Navigationsmenü jeweils oben und - um das Nach-oben-Scrollen zuvermeiden - und unten aber mit anderen IDs eingebaut.

    Nun möchte ich gerne, dass die beiden gleichen Menüpunkte oben UND unten gleichzeitig gehovert werden, wenn ich jeweils einen der beiden mit der Maus überfahre...

    na dann üb' mal 'n bisschen, dass du schnell genug wirst mit der maus :-)

    ernsthaft: mit CSS und :hover wird das kaum gehen (*), da wirst du wohl javascript bemühen müssen, eventhandler onmouseover/-out, und dann die CSS-eigenschaften oder -klasse des jeweils anderen links dynamisch ändern.

    gruß,
    wahsaga

    (*) es sei denn, man lässt sich auf in die links verschachtelte spans o.ä. ein, die man dann ähnlich wie bei eric meyers CSS popups absolut positioniert. halte ich in dem falle aber eher für eklig ...

    --
    "Look, that's why there's rules, understand? So that you _think_ before you break 'em."
    1. Das mit onmouseover() und onmouseout() hatte ich mir auch schon überlegt, jedoch weiß ich einfach nicht, wie ich wo ansetzen muss...

      Also theoretisch:

      <a href="#" id="test" onmouseover(...)>test</a>

      <a href="#" id="test2" onmouseover(...)>test2</a>

      ... <- was muss dort hin, dass sowohl die eigene Eigenschaft, als auch die des anderen Links geändert wird?

      1. Hi,

        <a href="#" id="test" onmouseover(...)>test</a>

        <a href="#" id="test2" onmouseover(...)>test2</a>

        ... <- was muss dort hin, dass sowohl die eigene Eigenschaft, als auch die des anderen Links geändert wird?

        z.B.: "this.style.eigenschaft='wert'; document.getElementById('test2').style.eigenschaft='wert'"
        Oder Du schreibst eine universelere Funktion, die die IDs logisch zusammenbastelt (wenn Du sie sinnvoll gewählt hast).

        freundliche Grüße
        Ingo

        1. Hm... Es klappt nicht so wirklich, gibt es keine Referenz in SELFHTML, ich weiß einfach nicht, wonach ich suchen soll... Oder kennst du eine Page, auf der ein ähnliches Skrip funktionstüchtig ist..?

    2. Hi,

      (*) es sei denn, man lässt sich auf in die links verschachtelte spans o.ä. ein, die man dann ähnlich wie bei eric meyers CSS popups absolut positioniert. halte ich in dem falle aber eher für eklig ...

      und in diesem Fall mit verschachtelten Links auch unmöglich.

      freundliche Grüße
      Ingo

      1. hi,

        und in diesem Fall mit verschachtelten Links auch unmöglich.

        ich rede ja auch nicht vom verschachteln von links (so gut solltest du mich doch inzwischen kennen ;-)).

        <a href="blubb.html">linktext<span>linktext</span></a>

        diesen span kannst du doch jetzt per position:absolute gerne unten positionieren, während der eigentliche link oben steht. und a:hover müsste beim überfahren _beider_ textteile auslösen ...

        aber wird natürlich sofort hinfällig, sobald der link selber positioniert ist, oder eines seiner vorfahrenelemente ...

        aber ich sagte ja, ist eh eklig :-)

        gruß,
        wahsaga

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

          diesen span kannst du doch jetzt per position:absolute gerne unten positionieren, während der eigentliche link oben steht.

          ja, OK - klappt auch nur auf den viewport bezogen, wenn die untere navigationsleise am ende des inhalts stehen und erst durch scrollen erreichbar sein soll, ist's damit auch essig.

          aber moment, wenn sowieso nie beide navigationsleisten gleichzeitig sichtbar sind - und so interpretiere ich das mit dem "um das Nach-oben-Scrollen zuvermeiden" - dann ist die ganze sache doch für den eimer, weil man den per javascript oder sonstwie ausgelösten hover-effekt auf dem jeweils "anderen" link eh nicht sehen würde ...? *kopfkratz*

          gruß,
          wahsaga

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

            Mit dieser doppelten Linkkonstruktion hast Du natürlich Recht - was war mir wohl so fremd (oder auch eklig), daß es mir garnicht in den Sinn kam.

            weil man den per javascript oder sonstwie ausgelösten hover-effekt auf dem jeweils "anderen" link eh nicht sehen würde ...? *kopfkratz*

            oops, das habe ich ja bisher noch garnicht bedacht ;-)

            freundliche Grüße
            Ingo

            1. hi,

              Mit dieser doppelten Linkkonstruktion hast Du natürlich Recht - was war mir wohl so fremd (oder auch eklig), daß es mir garnicht in den Sinn kam.

              wie gesagt, beispielsweise bei den "pure CSS popups" von eric meyer lässt sich das ja auch durchaus _sinnvoll_ einsetzen: http://www.meyerweb.com/eric/css/edge/popups/demo.html

              gruß,
              wahsaga

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

                wie gesagt, beispielsweise bei den "pure CSS popups" von eric meyer lässt sich das ja auch durchaus _sinnvoll_ einsetzen: http://www.meyerweb.com/eric/css/edge/popups/demo.html

                solange man in diesem Beispiel die Schrift nicht vergrößert ;-)

                freundliche Grüße
                Ingo

  2. Hallo, Ashura,

    Ich habe auf meiner Seite ein CSS-Navigationsmenü jeweils oben und - um das Nach-oben-Scrollen zuvermeiden - und unten aber mit anderen IDs eingebaut.

    Nun möchte ich gerne, dass die beiden gleichen Menüpunkte oben UND unten gleichzeitig gehovert werden, wenn ich jeweils einen der beiden mit der Maus überfahre...

    Mit Bildern und CSS habe ich sowas schon mal gesehen ...

    http://www.stopdesign.com/present/2004/sydney/limits/eg/ap_partners.html

    Ich glaube aber nicht, daß das so direkt auf Deinen Fall übertragbar ist.

    Ansonsten kannst Du den erwünschten Effekt wahrscheinlich am einfachsten mit Bildern erreichen, die zusammen ausgetauscht werden ...

    Grüße,

    Sebastian